1.forEach()

forEach方法迴圈陣列中每一個元素並採取操作，沒有返回值。它接受一個函式作為引數，這個函式接受三個引數：當前值、當前位置、整個陣列。

let arr = [1, 2, 3];
arr.forEach(function( item, index, array){
    console.log(item+1, index)
})
//2 0
//3 1
//4 2

2.map()

map方法遍歷陣列中每一個元素，有返回值，返回值是每一次執行的結果組成的新陣列。不會改變原陣列

map方法也是接受一個函式作為引數，這個函式接受三個引數：當前值、當前位置、整個陣列。

let arr = [1, 2, 3];
let newArr 
 
= arr.map(function(item, index, array){
   return item*2; 
})
console.log(newArr)  //[2, 4, 6]
console.log(arr)  //[1, 2, 3]

3.filter()

filter方法過濾陣列成員，滿足條件的成員組成一個新陣列返回。filter也不會改變原陣列。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(item, index, array){
        return item > 3
})
console.log(newArr, arr) 
 
//[4, 5], [1, 2, 3, 4, 5]

由於map、filter的返回值是陣列，因此也可以鏈式使用。

let arr = [1, 2, 3, 4];
let newArr = arr.map(function(item){
   return item*2 
}).filter(function(item){
   return item >= 6 
})
console.log(newArr)  //[6, 8]

4.reduce()

reduce一次處理陣列的成員，最終累計為一個值。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.reduce(function
 
(a, b){
  console.log(a, b);
  return a + b;  
}
console.log(arr)  //[1, 2, 3, 4, 5]
console.log(newArr)
// 1 2
// 3 3
// 6 4
// 10 5
//最後結果：15

上面程式碼中 ，reduce方法求出陣列所有成員的和。第一次執行，a、b分別是陣列中的第一個成員1和第二個成員2。第二次執行，a為上一輪的返回值3，b為陣列的個成員3。第三次執行，a為上一輪的返回值6，b為陣列的第四個成員4。第四次執行，a為上輪的返回值10，b為陣列的第五個成員5。至此所有成員遍歷完成，整個方法的返回值就是最後一輪的返回值15。

5.參考連結

https://wangdoc.com/javascript/stdlib/array.html

javascript中map、foreach、reduce、filter間區別？