1. 程式人生 > >JavaScript陣列結構與演算法——陣列詳解(中)

JavaScript陣列結構與演算法——陣列詳解(中)

迭代器方法

在上篇中,我們探討了很多陣列方法,接下來總結一下最後一組方法——迭代器方法。這些方法對陣列的每個元素應用一個函式,可以返回一個值、一組值、或者一個新陣列。

1、不生成新陣列的迭代器方法

以下這組迭代器方法不產生任何新陣列,它們要麼對陣列中的每個元素執行某種操作,要麼返回一個值。

1.1 forEach()

此方法接受一個函式作為引數,對陣列中的每個元素使用該函式。

    function square(num) {
        console.log(num + '的平方為: ' + num * num)
    }
    var nums = [1, 2, 3, 4, 5]
    nums.forEach(square)

以上方法用於求陣列nums中每個元素的平方,執行結果如下:


1.2 every()

此方法接受一個返回值為boolean型別的函式,對陣列中的每個元素使用該函式,該函式返回值全部為true的話,every()才會返回true,否則返回false。

    function isOdd(num) {
        return num % 2 !== 0
    }
    var array = [1, 2, 3, 4, 5]
    var odd = array.every(isOdd)
    if(odd) {
        console.log('此陣列中所有元素都為奇數')
    } else {
        console.log('此陣列中並非所有元素為奇數')
    }

以上程式碼中,將使用者判斷元素是否是奇數的函式作為引數傳給every(),當呼叫every()的陣列中元素全部為奇數時,返回值為true,否則為false。執行結果如下:


1.3 some()

此方法與every()類似,區別在於傳給some()的函式中,只要有一個返回true,此方法就返回true。

簡單測試一下:

    function hasOdd(num) {
        return num % 2 !== 0
    }
    var array = [1, 2, 3, 4, 5]
    var odd = array.some(hasOdd)
    if(odd) {
        console.log('此陣列中有奇數')
    } else {
        console.log('此陣列中沒有奇數')
    }

以上程式碼判斷了陣列元素中是否存在奇數,輸出結果為“此方法中有奇數”。

1.4 reduce()

此方法接受一個函式,從一個累加值開始,不斷地對累加值和陣列中的後續元素呼叫該函式,直到陣列的最後一個元素,最後返回得到的累加值。以下為使用reduce()求陣列中元素和的例子。

    function add(total, num) {
        return total + num
    }
    var array = [1, 2, 3, 4, 5]
    var odd = array.reduce(add)
    console.log(odd)

結果如下:


注意:假如陣列長度為1的話,array.reduce(add)並不會呼叫add(),而是直接返回該元素值。測試:

    function add(total, num) {
        console.log('total'+  total)
        console.log('num' + num)
        return total + num
    }
    var array = [1]
    var odd = array.reduce(add)
    console.log(odd)

以上程式碼直接輸出1,add()方法中的兩個log都不會執行,即:沒有呼叫add()。

除了求和,reduce()還可以用於將陣列元素連線成字串。

    function connect(string, item) {
        return string + ' ' + item
    }
    var array = ['I', 'am', 'a', 'developer', 'from', 'guangzhou']
    var sentence = array.reduce(connect)
    console.log(sentence)

結果:


(5)reduceRight()

此方法與reduce()類似,區別在於執行順序相反,reduce()為從左到右,此方法為從右到左。可以對以上程式碼修改一下作為測試:

    function connect(string, item) {
        return string + ' ' + item
    }
    var array = ['I', 'am', 'a', 'developer', 'from', 'guangzhou']
    var sentence = array.reduceRight(connect)
    console.log(sentence)

結果:


2、生成新陣列的迭代器方法

有兩個迭代器方法可以產生新陣列,map()與filter()。

2.1 map()

map()與forEach()有點像,都是每個陣列元素應用某個函式,區別在於map()返回一個新的陣列,該陣列的元素是對原陣列應用某個函式後的結果。對forEach()中的例子做一下修改:

    function square(num) {
        return num * num
    }
    var nums = [1, 2, 3, 4, 5]
   var newArr = nums.map(square)
    console.log(newArr)

對字元陣列也可以使用map(),原理跟數字的一樣的,假如有一個數組['54321', '23456', '01234'],如何截出520?

這個需求就可以使用map()輕鬆實現:

    function connect(str) {
        return str[0]
    }
    var array = ['54321', '23456', '01234']
    var newArr = array.map(connect)
    console.log('哈哈哈: ' + newArr.join(''))

執行結果:


2.2 filter()

filter()與every()類似,傳入一個返回值為boolean型別的函式。不同的是,對陣列中的所有元素使用傳入的方法,結果均為true時,該方法並不返回true,而是返回一個新陣列,該陣列包含原陣列中應用該函式後結果為true的元素。舉個例子:

    function isOdd(num) {
        return num % 2 !== 0
    }
    function isEven(num) {
        return num % 2 == 0
    }
    var nums = [1, 2, 3, 4, 5]
    var oddArr = nums.filter(isOdd)
    var evenArr = nums.filter(isEven)
    console.log('oddArr: ' + oddArr)
    console.log('evenArr: ' + evenArr)

執行結果:


2.3 filter()的應用例子。

(1)求及格的分數集,並對及格的所有分數進行求均值。

    function pass(score) {
        return score >= 60
    }
    var grades = [11, 33, 55, 66, 77, 57, 90, 59, 100]
    var passArr = grades.filter(pass)
    // 及格的所有分數
    console.log(passArr)
    // 及格分數的平均值
    var sum = 0, arrLength = passArr.length;
    for (var i = 0; i < arrLength; i++) {
        sum += passArr[i]
    }
    console.log(parseFloat(sum / arrLength))

結果:


(2)過濾掉無"love"的元素。

    function pass(word) {
        return word.indexOf('love') !== -1
    }
    var array = ['loveFamily', 'loveFriends', 'loveLearning', '哈哈哈啊哈哈']
    var love = array.filter(pass)
    console.log(love)

執行結果:


JavaScript資料結構與演算法——陣列詳解(中)完結~

剩餘內容(二維陣列與多維陣列)將在下篇總結。

以上總結如存在不正確的地方,歡迎指出O(∩_∩)O~~~

週末愉快!!