JS的數(shù)組的遍歷方式有很多，每個(gè)的功能又不盡相同，因此想好好地整理一下它們之間的區(qū)別。這里只列舉數(shù)組自帶的API，主要有forEach、filter、map、reduce、some、every.

1.forEach

let arr = [1,9,4,2];
arr.forEach((element, index, array) => {
    console.log(element);
})

forEach幾乎是最常用的遍歷數(shù)組的方法了，forEach()被調(diào)用時(shí)不會(huì)直接改變原數(shù)組，沒有返回值，也無法終止或者跳出。

2.filter

let arr = [1,9,4,2]
let arrFilter = arr.filter((element, index, array) => {
    return element > 3;
})
console.log(arrFilter);

filter顧名思義就是過濾，因此數(shù)組的filter用來篩選符合條件的值。filter 不會(huì)直接改變原數(shù)組，它返回過濾后的新數(shù)組。

3.map

let arr = [1,9,4,2]
let arrMap = arr.map((element, index, array) => {
    console.log(element)
    return element * 2
})
console.log(arr);
console.log(arrMap);

map和forEach類似，被調(diào)用時(shí)不修改數(shù)組本身，但是會(huì)返回一個(gè)新數(shù)組。

4.reduce

let arr = [1,9,4,2]
let arrReduce = arr.reduce((accumulator, currentValue, currentIndex, array)=>{
    console.log("accumulator:"+accumulator);
    console.log("currentValue:"+currentValue);
    console.log("currentIndex:"+currentIndex);
    console.log("array:");
    console.dir(array);
    return accumulator + currentValue;
})
console.log("arrReduce:"+arrReduce);

reduce和前面的3個(gè)循環(huán)不同，它的參數(shù)里有一個(gè)累加器的概念，并且有沒有initialValue執(zhí)行的次數(shù)也會(huì)有差別。為此整理了一個(gè)reduce的執(zhí)行記錄。
首先是沒有initialValue的情況：

如果有initialValue，那如上的函數(shù)這樣改寫：

let arr = [1,9,4,2]
let arrReduce = arr.reduce((accumulator, currentValue, currentIndex, array)=>{
    console.log("accumulator:"+accumulator);
    console.log("currentValue:"+currentValue);
    console.log("currentIndex:"+currentIndex);
    console.log("array:");
    console.dir(array);
    return accumulator + currentValue;
},5)
console.log("arrReduce:"+arrReduce);

然后執(zhí)行記錄如下：

理解了reduce的執(zhí)行過程就知道reduce的具體功用是什么了，MDN官方給出了如下幾個(gè)場景:求和、計(jì)算單元素次數(shù)、按順序執(zhí)行promise、功能性管道等。

5.some

let arr = [1,9,4,2]
let arrSome = arr.some((element,index,array) => {
   return element>4
})
console.log(arr)
console.log(arrSome);

some遍歷數(shù)組找尋符合條件的，找到了返回true，遍歷完畢沒有找到返回false。

6.every

let arr = [1,9,4,2]
let arrEvery = arr.every((element,index,array) => {
   return element<10
})
console.log(arr)
console.log(arrEvery);

every遍歷數(shù)組檢查符合條件的，有不符合立即返回false，遍歷完畢全符合才返回true。

以上所列舉的方法都不會(huì)改變原數(shù)組，遍歷范圍在第一次執(zhí)行之后就已經(jīng)確定，在callback中如果改變了數(shù)組，也不會(huì)生效。每一個(gè)API背后的運(yùn)用場景MDN上都有詳細(xì)的舉例，如果想要有更高階的運(yùn)用就需要工作積累了。

參考文獻(xiàn)：
1.MDN-Array