js数组reduce()详解
基本概念
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
reduce() 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上次回调函数的返回值),当前元素值,当前索引,调用reduce的数组。
语法
arr.reduce(callback, [initialValue])
- callback (执行数组中每个值的函数,包含四个参数)
- previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
- currentValue (数组中当前被处理的元素)
- index (当前元素在数组中的索引)
- array (调用 reduce 的数组) - initialValue (作为第一次调用 callback 的第一个参数)
例一
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(pre, cur, index, arr) {
console.log(pre, cur, index);
return pre + cur;
})
console.log(arr, sum);
/*也可以写成*/
var arr = [1, 2, 3, 4];
var sum = arr.reduce((pre, cur, index, arr) => {
console.log(pre, cur, index);
return pre + cur;
})
console.log(arr, sum);
例一打印结果:
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
这里可以看出,上面的例子index是从1开始的,第一次prev的值是数组的第一个值,数组的长度是4,但是reduce函数循环3次。
例二
var arr = [1, 2, 3, 4];
var sum = arr.reduce((pre, cur, index, arr) => {
console.log(pre, cur, index);
return pre + cur;
}, 0)//指定cur的类型为Number并且初始值为0
console.log(arr, sum);
例二打印结果:
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
这个例子index是从0开始的,第一次的perv的值是我们设置的初始值0,数组长度是4,reduce函数循环4次。
如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。
如果提供initialValue,从索引0开始。
例三
var arr = []; // 空数组
var sum = arr.reduce((pre, cur, index, arr) => {
console.log(pre, cur, index);
return pre + cur;
})
console.log(arr, sum);
例三打印结果:
报错:TypeError: Reduce of empty array with no initial value
var arr = []; // 空数组
var sum = arr.reduce((pre, cur, index, arr) => {
console.log(pre, cur, index);
return pre + cur;
}, 0) // 提供初始值
console.log(arr, sum);
打印结果:
[ ] 0
通常提供初始值更安全
用法
-
求和或求积
var arr = [1, 2, 3, 4]; var sum = arr.reduce((x, y) => { return x + y; }, 0); var mul = arr.reduce((x, y) => { return x * y; }, 1); sonsole.log(sum); // 求和 10 sonsole.log(mul); // 求积 24
-
计算数组中每个元素出现的次数
var names = ['Alice', 'Bob', 'Tiff', 'Alice']; var nameNum = names.reduce((pre, cur) => { if (cur in pre) { pre[cur]++ } else { pre[cur] = 1 } return pre }, {}) console.log(nameNum )
{ Alice: 2, Bob: 1, Tiff: 1 }
-
数组去重
var arr = [1, 2, 3, 3, 4, 2] var newArr = arr.reduce((pre, cur) => { if (!pre.includes(cur)) { return pre.concat(cur) } else { return pre } }, []) console.log(newArr)
[1, 2, 3, 4]
var arr = [ {id: 0, name: "小明"}, {id: 1, name: "小张"}, {id: 2, name: "小李"}, {id: 3, name: "小孙"}, {id: 1, name: "小周"}, {id: 2, name: "小陈"} ] var obj = {} var newArr = arr.reduce((pre, cur) => { obj[cur.id] ? '' : obj[cur.id] = true && pre.push(cur); return pre }, []) console.log(newArr)
[ {id: 0, name: “小明”}, {id: 1, name: “小张”},{id: 2, name: “小李”},{id: 3, name: “小孙”}]
-
将二维数组转化为一维
var arr = [[0, 1], [2, 3], [4, 5]] var newArr = arr.reduce((pre, cur) => { return pre.concat(cur) }, []) console.log(newArr)
[0, 1, 2, 3, 4, 5]
-
将多维数组转化为一维
var arr = [[0, 1], [2, 3], [4,[5,6,7]]] var newArr = function(arr) { return arr.reduce((pre, cur) => { pre.concat(Array.isArray(cur) ? newArr(cur) : cur) }, []) } console.log(newArr(arr))
[0, 1, 2, 3, 4, 5, 6, 7]
-
对象里的属性求和
var arr = [ {subject: 'math', score: 10}, {subject: 'chinese', score: 10}, {subject: 'english', score: 10} ] var sum = arr.reduce((pre, cur) => { return cur.score + pre }, 0) console.log(sum)
30