JavaScript中reduce()方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001435119854495d29b9b3d7028477a96ed74db95032675000

重新学习reduce，这个是比较易懂的（累计）

如何累计呢：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 这个感觉特别像递归

累加

var arr = [1, 3, 5, 7, 9]; arr.reduce(function (x, y) { return x + y; });

累乘

'use strict';function product(arr) {

var result = arr.reduce(function(x,y){
return x*y;
});

return result;

}// 测试:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
console.log('测试通过!');
}
else {
console.log('测试失败!');
}

原文 http://aotu.io/notes/2016/04/15/2016-04-14-js-reduce/

JavaScript中reduce()方法不完全指南

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终为一个值，是ES5中新增的又一个数组逐项处理方法，那reduce方法跟foreach、map等数组方法又有啥区别呢。

arr.reduce(callback[, initialValue]) — More From MDN

callback（一个在数组中每一项上调用的函数，接受四个函数：）
- previousValue（上一次调用回调函数时的返回值，或者初始值）
- currentValue（当前正在处理的数组元素）
- currentIndex（当前正在处理的数组元素下标）
- array（调用reduce()方法的数组）
initialValue（可选的初始值。作为第一次调用回调函数时传给previousValue的值）

图解参数

抛开上面晦涩难懂的语法介绍，下面我们直接上实例：

数组 arr = [1,2,3,4] 求数组的和

forEach 实现

var arr = [1,2,3,4],
sum = 0;
arr.forEach(function(e){sum += e;}); // sum = 10 just for demo

map 实现

var arr = [1,2,3,4],
sum = 0;
arr.map(function(obj){sum += obj});//return undefined array. sum = 10 just for demo

reduce实现

var arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10

没错，reduce 专为累加这种操作而设计，为累加这类操作而设计的参数，十分方便。那么问题来了，reduce方法的参数到底有哪些用法呢？

参数分解

1. 不传initialValue值

var arr = [1,2,3];
arr.reduce(function(pre,cur,index,arr){debugger;return pre+cur});

探查Arguments数组得到：

第一次debugger
第二次debugger
第三次debugger
return 6;

2. 传入initialValue 值

var arr = [1,2,3]
arr.reduce(function(pre,cur,index,arr){debugger;return pre+cur},10);

第一次debugger
第二次debugger
第三次debugger
第四次debugger
return 16

可以看出传入initialValue 会多递归一次，而initialValue的值的作用大家应该也明了了：为累加等操作传入起始值（额外的加值）。

而callbackfn中的四个参数也可以在debugger的动态变化中查看出具有的特性。

那么利用reduce方法还可以做哪些事情呢?

Final: insert a little deeper

reduce方法在数组对象中的运用：

搬砖工小王拿到了这样的数据格式： var arr = [ {name: 'brick1'}, {name: 'brick2'}, {name: 'brick3'} ]
希望得到这样的数据格式： 'brick1, brick2 & brick3'
当然数组异常流：[ {name: ‘brick1’} ] 和空数组传入得到 'brick1' 和空