reduce使用介绍
一、reduce语法介绍
array.reduce((prev, item, index, arr)=> {
/***/
}, initialValue)
参数:
参数一 callback 函数,包含了四个参数:
prev | 提供了 initialValue,则为之;为提供 initialValue,为数组的第一项 |
---|---|
item | 当前数组循环正在处理的数组元素 |
index | 当前 currentValue 的索引 |
array | 执行 reduce 操作的数组 |
参数二 initialValue 初始值,初始值可提供,也可不提供。提供初始值,item 从数组第一项开始,若不提供初始值,则 item 从第二项开始执行,对应的第一次 prev 是数组第一项的值
返回值:
返回最后的执行结果
二、实例解析
let arr = ['h','i','n','a']
let str = arr.reduce((prev, item, index, arr)=> {
console.log(prev, item, index, arr)
return prev + item
}, 'C')
console.log(str) // China
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
});
console.log(arr, sum);
打印结果
1 2 1
3 3 2
6 4 3
[ 1, 2, 3, 4 ] 10
三、注意事项
-
reduce是一个对数组累积操作的方法,使用时要加上 return 返回累积操作的数据。这样 prev 才能获取上一次执行的结果,否则是 undefined
-
空数组执行 reduce 操作且不提供初始值时reduce会报错,错误信息如下:
四、具体使用
1.数组去重
let arr = [1, 2, 2, 2, 3, 3, 4, undefined, undefined, null]
arr.reduce((prev, item) => {
return prev.includes(item) ? prev : prev.concat(item);
}, [])
// [1, 2, 3, 4, undefined, null]
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);
2.数组扁平化 多维转一维
数组降维
let arr = [0,[1],[2, 3],[4, [5, 6, 7]]];
let reduceArray = function (arr) {
return arr.reduce((prev, item) => {
return prev.concat(Array.isArray(item) ? reduceArray(item) : item)
}, [])
}
reduceArray(arr)
//[0, 1, 2, 3, 4, 5, 6, 7]
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr));
二维降一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr);
打印结果[0, 1, 2, 3, 4, 5]
3.数组累加
let arr = [1, 2, 3, 4]
arr.reduce((prev, item) => {
return prev + item;
})
// 10
4.计算数组中每个元素出现的次数
var arr = ["one", "two", "three", "six", "four", "five", "six"];
var newArr = arr.reduce((pre, cur) => {
console.log(cur, pre);
if (cur in pre) {
pre[cur]++;
} else {
pre[cur] = 1;
}
return pre;
}, {});//这里注意初始值要默认赋予空对象,不然会报错
console.log(newArr);
打印结果
打印结果
one {}
two { one: 1 }
three { one: 1, two: 1 }
six { one: 1, two: 1, three: 1 }
four { one: 1, two: 1, three: 1, six: 1 }
five { one: 1, two: 1, three: 1, six: 1, four: 1 }
six { one: 1, two: 1, three: 1, six: 1, four: 1, five: 1 }
{ one: 1, two: 1, three: 1, six: 2, four: 1, five: 1 }
5.对象属性求和
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
console.log(sum)
打印结果 60