JavaScript for循環、數組高級語法

簡介

本文主要介紹JavaScript中for迭代的幾種方法，以及數組的三個高級方法（filter、map、reduce），本文會涉及到 = > 箭頭函數，由於不是本文章研究的重點，請自行了解。

for和增強for迭代

存在數組如下：

books: [
                {
                    id: 1,
                    name: '《算法導論》',
                    date: '2006-9',
                    price: 88.883,
                    count: 1
                },
                {
                    id: 2,
                    name: '《Java編程思想》',
                    date: '2002-2',
                    price: 82.226,
                    count: 1
                },
                {
                    id: 3,
                    name: '《C語言從入門到放棄》',
                    date: '2007-9',
                    price: 87.787,
                    count: 1
                },
                {
                    id: 4,
                    name: '《Linux私房菜》',
                    date: '2001-9',
                    price: 18.888,
                    count: 1
                }
            ]

普通的迭代方法：

for (let i = 0; i < books.length; i++) {
      	total = books[i].price * books[i].count;
    }

使用for in迭代

注意：js中的for in不同於Java，下面案例中 in之前的變量是循環中的下標而不是當前元素。

 for (let index in books) {
          total += books[index].price * books[index].count;
     }

使用for of迭代

在JavaScript中for of與Java中的for in用法相同，此時的item就是當前元素

 for (let item of books) {
         total += item.price * item.count;
     }

數組的高階方法

在使用數組中我們經常會遇到如下的場景：

• 拿出數組中滿足指定條件的元素，簡歷新數組；

• 對數組進行一系列操作后放入新數組，例如將所有元素都 * 2；

• 計算數組元素的總合。

對於這三種應用場景，JavaScript都提供了對應的方法進行了封裝，我們只需要調用即可。

存在數組如下：

let nums = [1, 3, 5, 7, 8, 9, 10, 20, 30, 40];

filter方法

filter方法是為了解決上述的場景1，它的語法如下：

    //為true的結果都會存放入newNums
    let newNums = nums.filter(function (n) {
        return n > 5;
    });
    console.log(newNums);

filter會迭代數組其回調中的形參n就是當前元素，且返回一個布爾類型的值，如果返回的是true，當前迭代的元素n就會存入指定的新數組中。此時，只有所有滿足 > 5 的元素都會存入newNums中。當然我們可以自定義任何是布爾返回值的判斷。

map方法

map方法是為了解決上述的場景2，它的語法如下：

 //將返回值全部加入新數組
    let newNums2 = newNums.map(function (n) {
        return n * 2;
    });
    console.log(newNums2);

map 方法同樣會迭代數組，回調函數的參數n仍然是當前元素，return的是一個T（迭代數組元素類型）類型的值。所有返回的值都會被加入newNums2數組中，我們可以在方法體內進行一系列的操作。

reduce方法

reduce是為了解決上述的場景3，其語法和上述兩個方法不太相同：

    // 數組匯總
    let total = newNums2.reduce(function (pre, current) {
        return pre + current;
    }, 0);
    console.log(total);

reduce中需要傳遞兩個參數，參數1為回調函數，參數2是baseValue（基值）。

reduce的回調會返回一個obj類型的值，不過我們一般會返回一個數值，它有兩個參數第一個參數pre是值上一次返回的值（首次調用沒有返回值，所以它的初值就是baseValue的值。這也是reduce有兩個參數的原因，它的思想類似於斐波那契數列），current的值為數組每次迭代的元素值。上述案例計算了newNum2的所有元素之和。

filter、map、reduce鏈式調用

上述三個方法支持鏈式調用，語法如下：

//鏈式調用
    let tot = nums.filter(function (n) {
        return n > 5;
    }).map(function (n) {
        return n * 2;
    }).reduce(function (pre, current) {
        return pre + current;
    }, 0);
    console.log(tot);

使用=>箭頭函數優化代碼

JavaScript中的箭頭函數類似於Java中的lamdba表達式，下面的案例演示了使用=>優化filter、map、reduce方法

    let to = nums.filter(n => n > 5)
        .map(n => n * 2)
        .reduce(((pre, current) => pre + current), 0);
    console.log(to);

下面案例中使用reduce方法實現了一個購物車總價計算：

totalPrice: function () {
     //reduce 的使用
     return books.reduce(((pre, current) => pre + current.price * current.count), 0);
}