摘要：總結(jié)遍歷數(shù)組的時(shí)候應(yīng)該盡量使用這些，靈活運(yùn)用可以讓代碼更加優(yōu)雅，這種盡可能使用函數(shù)和鏈?zhǔn)秸{(diào)用的風(fēng)格很接近函數(shù)式編程，可以提高代碼質(zhì)量。

js中有很多可以遍歷數(shù)組的API，既然已經(jīng)封裝的這么好，為什么不在平常開發(fā)的時(shí)候使用，本文講講forEach、map、filter、some、every、reduce這些API的使用，并且和普通的for語(yǔ)句作對(duì)比。

我們以一個(gè)對(duì)象數(shù)組作為測(cè)試數(shù)據(jù)：

const testArr = [
    { id: 1, name: "張三", age: 18 }, 
    { id: 2, name: "李四", age: 24 }, 
    { id: 3, name: "王小二", age: 22 }
];

打印出所有對(duì)象的id，for語(yǔ)句寫法如下：

for (let i = 0, len = testArr.length; i < len; i++) {
    console.log(testArr[i].id); // 1, 2, 3
}

簡(jiǎn)單易懂，接下來(lái)看看forEach的寫法：

testArr.forEach(item => console.log(item.id)); // 1, 2, 3

兩者結(jié)果是一樣的，for語(yǔ)句是命令式編程風(fēng)格，而forEach是聲明式編程風(fēng)格；前者會(huì)告訴機(jī)器該如何做，而后者只關(guān)注要做什么。我們推崇后一種寫法，應(yīng)該盡量使用forEach，這樣我們還不需要寫for()里面一大串的表達(dá)式，何樂而不為。（ps：如果對(duì)性能吹毛求疵的話，還是老老實(shí)實(shí)用for吧?。?/p> map

現(xiàn)在我們想得到所有對(duì)象的name并組成新的數(shù)組，for語(yǔ)句寫法如下：

let names = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    names.push(testArr[i].name);
}

console.log(names); // [ "張三", "李四", "王小二" ]

比較啰嗦，這種對(duì)原數(shù)組每個(gè)元素進(jìn)行指定操作并最后返回新數(shù)組的問(wèn)題用map再合適不過(guò)了：

testArr.map(item => item.name); // [ "張三", "李四", "王小二" ]

對(duì)比f(wàn)or語(yǔ)句，map是多么優(yōu)雅??！

關(guān)于map，有個(gè)需要注意的點(diǎn)：

[1, 2, 3].map(parseInt); // [ 1, NaN, NaN ]

這里有些同學(xué)會(huì)有些疑惑，為什么結(jié)果不是[1, 2, 3]呢？

其實(shí)很簡(jiǎn)單，map會(huì)將三個(gè)參數(shù)（當(dāng)前正在遍歷的元素，當(dāng)前元素索引，原數(shù)組本身）傳給parseInt，而parseInt是可以有兩個(gè)參數(shù)的。

這時(shí)候就相當(dāng)于執(zhí)行以下代碼：

parseInt(1, 0); // 1
parseInt(2, 1); // NaN
parseInt(3, 2); // NaN

所以結(jié)果為[1, NaN, NaN]，而不是[1, 2, 3]。

有時(shí)候我們需要篩選出符合指定條件的元素，比如age大于18的對(duì)象，for的寫法如下：

let newArr = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].age > 18) {
        newArr.push(testArr[i]);
    }
}

console.log(newArr); // [ { id: 2, name: "李四", age: 24 }, { id: 3, name: "王小二", age: 22 } ]

可以看到，寫法很啰嗦，此時(shí)用filter的話就很方便了：

testArr.filter(item => item.age > 18); // [ { id: 2, name: "李四", age: 24 }, { id: 3, name: "王小二", age: 22 } ]

filter還可以用于數(shù)組去重，代碼如下：

const arr2 = [1, 2, 4, 1, 3, 2, 6];

arr2.filter((item, idx, arr) => {
    return arr.indexOf(item) === idx;
}); // [ 1, 2, 4, 3, 6 ]

獲取所有對(duì)象的某種屬性，事先需要判斷對(duì)象是否具有該屬性，for寫起來(lái)有點(diǎn)丑陋：

function getAllOfSomeProps (array, props) {
    let arr = [];

    array.forEach((item) => {           
        if (item[props]) {
            arr.push(item[props]); // => item[props] && arr.push(item[props])
        }
    })

    return arr;
}

getAllOfSomeProps(testArr, "sex"); // []
getAllOfSomeProps(testArr, "id"); // [ 1, 2, 3 ]
getAllOfSomeProps(testArr, "name"); // [ "張三", "李四", "王小二" ]

map + filter的組合就優(yōu)雅的多了：

return array.map(item => item[props]).filter(item => item);

我們?cè)倥e個(gè)比較通俗的例子，比如我們需要獲得數(shù)組里所有age大于18的對(duì)象的name，for語(yǔ)句如下：

let newNames = [];

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].age > 18) {
        newNames.push(testArr[i].name);
    }
}

console.log(newNames); // [ "李四", "王小二" ]

再看看 map + filter 的寫法：

testArr.filter(item => item.age > 18).map(item => item.name); // [ "李四", "王小二" ]

還是很優(yōu)雅。

有時(shí)候我們需要添加新對(duì)象但是某些屬性不能重復(fù)，for的寫法如下：

function isRepeat (array, props, value) {
    for (let i = 0, len = array.length; i < len; i++) {
        if (array[i][props] === value) {
            return true;
        }
    }

    return false;
}

some方法測(cè)試數(shù)組中的某些元素是否通過(guò)指定函數(shù)的測(cè)試，改寫如下：

function isRepeat (array, props, value) {
    return array.some(item => item[props] === value);
}

isRepeat(testArr, "name", "張三"); // true
isRepeat(testArr, "name", "李白"); // false

我們需要檢測(cè)某個(gè)數(shù)組里的每個(gè)對(duì)象是否都具有某種屬性，for的寫法如下：

function hasSomeProps (array, props) {
    for (let i = 0, len = array.length; i < len; i++) {
        if (!array[i][props]) {
            return false;
        }
    }

    return true;
}

every方法測(cè)試數(shù)組的所有元素是否都通過(guò)了指定函數(shù)的測(cè)試。改寫如下：

function hasSomeProps (array, props) {
    return array.every(item => item[props]);
}

hasSomeProps(testArr, "name"); // true

有時(shí)需要在滿足某條件下終止循環(huán)，比如打印對(duì)象信息，直到name為李四：

for使用break：

for (let i = 0, len = testArr.length; i < len; i++) {
    if (testArr[i].name === "李四") {
        break;
    }
    console.log(testArr[i]); // { id: 1, name: "張三", age: 18 }
}

some，當(dāng)條件為真時(shí)返回true跳出循環(huán)：

testArr.some((item) => {
    if (item.name === "李四") {
        return true;
    }
    console.log(item); // { id: 1, name: "張三", age: 18 }
})

every，當(dāng)條件為真時(shí)返回false跳出循環(huán)：

testArr.every((item) => {
    if (item.name === "李四") {
        return false;
    }
    console.log(item); // { id: 1, name: "張三", age: 18 }
})

因?yàn)閒orEach是沒有break的，這里我們可以使用some，every替代。

計(jì)算[343, 34, 232, 4, 343, 335, 353535]的總和，for的寫法如下：

const arr = [343, 34, 232, 4, 343, 335, 353535];

let sum = 0;
for (let i = 0, len = arr.length; i < len; i++) {
    sum += arr[i];
}
console.log(sum); // 354826

使用reduce來(lái)做這種累加操作很方便：

arr.reduce((prev, curr) => prev + curr) // 354826

其實(shí)用法遠(yuǎn)不止如此，同學(xué)們?cè)谄匠W(xué)習(xí)或者工作中可以慢慢積累。

總結(jié)：遍歷數(shù)組的時(shí)候應(yīng)該盡量使用這些API，靈活運(yùn)用可以讓代碼更加優(yōu)雅，這種盡可能使用函數(shù)和鏈?zhǔn)秸{(diào)用的風(fēng)格很接近函數(shù)式編程，可以提高代碼質(zhì)量。