JS中 reduce() 的用法_数组遍历

一、语法

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

arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。

其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧

 

二、实例

1. 求数组项之和

let arr2= [1,2,3,4,5,2,3];
// 求数组之和
let sum = arr2.reduce(function(prev, cur){
    return prev + cur;

},0);
console.log(sum);

由于传入了初始值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);

由于未传入初始值，所以开始时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()、every()、some()和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()，用于遍历数组，返回处理之后的新数组

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

可以看到，该方法与forEach()的功能类似，只不过map()具有返回值，会返回一个新的数组，这样处理数组后也不会影响到原有数组。

3、filter()，用于筛选数组中满足条件的元素，返回一个筛选后的新数组

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

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

可以看到，示例中是要筛选出数组arr中的所有负数，所以该方法最终返回一个筛选后的新数组[-2, -5]。

兼容性： 由于以上方法均属ES5方法，所以IE8及其以下浏览器均不兼容。

重点总结：

① forEach()无返回值，map()和filter()返回新数组，every()和some()返回布尔值
② 五种遍历方法均为ES5方法

链接：
https://www.jianshu.com/p/b728253c90b5
来源：简书

JS数组方法大全

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