数组遍历循环方法：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