數組遍歷循環方法：map()，filter()，reduce()和forEach()

一、語法

arr.reduce(function(prev,cur,index,arr){
...
}, init);

arr 表示原數組；
prev 表示上一次調用回調時的返回值，或者初始值 init;
cur 表示當前正在處理的數組元素；
index 表示當前正在處理的數組元素的索引，若提供 init 值，則索引為0，否則索引為1；
init 表示初始值。

其實常用的參數只有兩個：prev 和 cur。接下來我們跟着實例來看看具體用法吧

 

Array.reduce(callback)

這個方法是根據callback中的條件對數組中的每個元素都進行類加的操作，返回一個全新的值

二、實例

1. 求數組項之和

let arr2= [1,2,3,4,5,2,3];
// 求數組之和
let sum = arr2.reduce(function(prev, cur){
    return prev + cur;
},0);
console.log(sum);

//箭頭函數寫法
let b = a.reduce((i, j) => {

   return i + j;

}, 0);

由於傳入了初始值0，所以開始時prev的值為0，cur的值為數組第一項1，相加之后返回值作為下一輪回調的prev值，然后再繼續與下一個數組項相加

2. 求數組項最大值

let arr2= [1,2,3,4,5,2,3];

// 求數組最大值
let max = arr2.reduce(function(prev, cur){
    return Math.max(prev, cur);
});
console.log(max);

// 箭頭函數寫法
let newArr2 = arr.reduce((pre,cur,curIndex,arr) => pre>cur?pre:cur)

//pre=1不大於cur=2,返回2;

//pre接收返回值2;pre=2不大於cur=3,返回3

console.log(newArr2)  //輸出4,找到最大值,如果想找最小值只需要pre<cur?pre:cur

由於未傳入初始值，所以開始時prev的值為數組第一項，cur的值為數組第二項，取兩值最大值后進入下一輪回調。

3. 數組去重

let arr2= [1,2,3,4,5,2,3];
let newArr = arr2.reduce(function(prev, cur){
    if( prev.indexOf(cur) == -1){
        prev.push(cur);
    }
    return prev;

},[]);
console.log(newArr);

 實現的原理如下：

 初始化一個空數組，將需要去重的數組的值在空數組里查找，如果找不到，就將這個值添加到空數組里，直到查找完畢，將空數組返回出來。

 重點總結

reduce() 是數組的歸並方法，與forEach()、map()、filter()等迭代方法一樣都會對數組每一項進行遍歷，但是reduce() 可同時將前面數組項遍歷產生的結果與當前遍歷項進行運算，這一點是其他迭代方法無法企及的

 

三，forEach()、map()、filter()的用法

 在Javascript中，如何處理數組中的每一項數據？

有人可能會說，這還不簡單，直接一個for循環遍歷一下就好了。

是的，確實，這是最常見的做法。

但是，除此之外，ES5還提供了處理數組更加方便的方法，如題。

接下來，我將通過幾個簡單的實例來具體講解這幾個方法。

1、forEach()，用於遍歷數組，無返回值

將數組中的每一項翻倍

var arr = [1,-2,3,4,-5];

arr.forEach(function(item,index,array){ array[index] = item * 2; }); console.log(arr); // [2,-4,6,8,-10]

forEach()可以傳入一個匿名函數作為參數，而該匿名函數有含有三個參數，其依次代表數組遍歷時的當前元素item，數組遍歷時的當前元素的索引index，以及正在遍歷的數組array。有了這三個參數，可以方便我們做很多事情，比如說示例當中將每一項數組元素翻倍，這時需要用到第一個參數item。但是，僅僅只是將item乘以2可不行，我們還得將其賦值給原來的數組，這時我們就得用到后面兩個參數index和array。

 

根據上述可知，array[index]是全等於item的。

arr.forEach(function(item,index,array){
    console.log(array[index] === item);   // true
});

2、map()，用於遍歷數組，返回處理之后的新數組

Array.map(callback)

這個方法是根據callback函數中的條件，返回一個新數組

let a = [1,2,3,4,5];
var newArr = a.map(function(item,index,array){
    return item * 2;
});
console.log(newArr);   // [2,-4,6,8,-10]

//箭頭函數寫法
let b = a.map(item => item * 2);
let newArr=arr.map((item,index,arr)=> item)

可以看到，該方法與forEach()的功能類似，只不過map()具有返回值，會返回一個新的數組，這樣處理數組后也不會影響到原有數組。

3、數組過濾filter()，用於過濾數組中滿足條件的元素，返回一個過濾后的新數組

Array.filter(callback)

var arr = [1,-2,3,4,-5];

var minus = arr.filter(function(item,index,array){
    return item < 0;
});
console.log(minus);   // [-2, -5]

let newArr1=arr.filter((item,index,array)=> item < 0)

示例中是要過濾出數組arr中的所有負數，所以該方法最終返回一個過濾后的新數組[-2, -5]。

例子2： 數組過濾

let a = [
  {
    name: 'kele',
    title: '可口可樂'
  },
  {
    name: 'kele',
    title: '芬達'
  },
  {
    name: 'hn',
    title: '紅牛'
  }
]
let b = a.filter(item => item.name === 'kele');
 
console.log(b) 
//[{name: 'kele', title: '可口可樂'},{name: 'kele', title: '芬達'}]

Array.filter()讓我們擺脫了for循環，代碼看起來更加的清爽！

filter過濾其它用法參考：https://segmentfault.com/a/1190000012945999

 

兼容性： 由於以上方法均屬ES5方法，所以IE8及其以下瀏覽器均不兼容。

重點總結：

① forEach()無返回值，map()和filter()返回新數組，every()和some()返回布爾值
② 五種遍歷方法均為ES5方法

 

其它參考：
https://www.jianshu.com/p/b728253c90b5

JS數組方法大全

https://www.jianshu.com/p/f7bc294ded14