前言

在ES6新增的陣列方法中，包含了多個遍歷方法，其中包含了用於篩選的filter和reduce

filter

主要用於篩選陣列的filter方法，在使用中，不會改變原陣列，同時會將符合篩選條件的元素，放入新的陣列進行返回。

/***
   * @item 陣列元素
   * @index 遍歷陣列下標
   * @thisArr 當前陣列
   */
let arr1 = [1, 2, 3, 4, 5];
  let newArr1 = arr1.filter((item, index, thisArr) => {
    console.log(item);
    console.log(index);
    console.log(thisArr);
    return item > 2;
  })
  console.log(arr1);
  console.log(newArr1);`
 

上面的程式碼，執行之後，可以看到原來的陣列arr1沒有發生改變，而newArr1用於接收符合篩選條件的陣列

// [1, 2, 3, 4, 5]  arr1
// [3, 4, 5]    newArr1

reduce

不同於map和filter這類遍歷方法，reduce的語法較為特殊一點

語法：

array.reduce(function(total,currentValue,currentIndex,thisArr){},initValue);
@function回撥函式作為第一個引數，

total作為返回值或者初始值進行返回

currentValue當前遍歷的元素

currentIndex當前遍歷元素下標

thisArr為當前執行操作的陣列。

initValue是作為傳遞給函式的初始值
 

陣列求和

// 陣列求和
let arr1 = [1, 2, 3, 4, 5]
let totals = arr1.reduce(function (prev, next) {
    console.log(prev);
    console.log(next);
    return prev + next;
}, 0)
console.log(totals)

篩選首字母是否是含有b字母

let arr = ['beep', 'boop', 'foo', 'bar'];
console.log(arr.reduce((acc, val) => (val[0] === 'b' && acc.push(val), acc), []));

// 進階每個數是否含有'b'
arr.reduce((acc, val) => 
           (val.indexOf('b') >-1 && acc.push(val), acc),
           [])
 

除了陣列求和之外，reduce還可以處理陣列去重，遍歷最大值最小值的操作

同時還能已高階函式的形式供其他函式進行呼叫。

最後

reduce和filter作為ES6中陣列新增的方法，在面試和開發中經常會遇到，可以通過這兩個函式結合其他類似map等新方法去處理一些較為複雜的資料。

文章個人部落格地址：JavaScript 陣列方法filter和reduce