reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行),将其结果汇总为单个返回值。reduce方法可做的事情特别多,就是循环遍历能做的,reduce都可以做,比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
具体语法:
arr.reduce(function(prev,cur,index,arr){
...
}, init);
let 结果 = 数组.reduce(累加器, 初始化值)
//累加器
(累加结果, 当前值, 当前索引)=>{
return 处理结果
}
参数解释:
- prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值,或者初始值 init;
- cur 必需。表示当前正在处理的数组元素;
- index 可选。表示当前正在处理的数组元素的索引,若提供 init 值,则起始索引为- 0,否则起始索引为1;
- arr 可选。表示原数组;
- init 可选。表示初始值。
参见以下实例:
1.没有设置函数初始迭代值时:
const arr = [1,2,3,4,5];
const sum = arr.reduce(function(prev,cur,index,arr){
console.log(prev,cur,index);
return prev + cur;
});
console.log('arr:',arr,'sum:',sum);
运行结果:
分析:在这里reduce的作用就是对这个数组进行求和,迭代了4次,函数迭代的初始值是1,也就是默认值(数组的第一项),prev的值是每次计算后的值。
2.设置函数初始迭代值
const arr = [1,2,3,4,5];
const sum = arr.reduce((prev,cur,index,arr) => {
console.log(prev,cur,index);
return prev + cur;
},5);
console.log('arr:',arr,'sum:',sum);
运行结果:
分析:这里我们添加了一个初始的迭代值,也就是让prev从5开始计算(以5为初始值求和),可以看到,这里迭代了5次,结果也加上了初始值。同时,这里使用箭头函数来代替完整的函数。 运行结果相同。
reduce的实际应用:
1.数组求和:
let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b)) // - 15
console.log(arr.reduce((a,b) => a * b)) // - 120
2.计算数组中每个元素出现的次数:
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bob', 'Bob'];
var countedNames = names.reduce(function (allNames, name) {
console.log(allNames,name);
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countedNames);
运行结果:
分析:
a.由于设置了迭代初始值,allNames的第一个值是一个空对象,此时name为Alice,然后进行判断,发现在allNames中没有Alice属性,所以就将Alice对应的属性值赋为1
b.后面没有重复的是一样的道理,如果碰到重复值,就会将该属性值加1,这样就能计算元素重复的次数了。
3.去除数组中重复的元素
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
if (accumulator.indexOf(currentValue) === -1) {
accumulator.push(currentValue)
}
return accumulator;
}, []);
console.log(myOrderedArray); // - ['a','b','c','d']
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
if(init.length === 0 || init[init.length-1] !== current) {
init.push(current);
}
return init;
}, []);
console.log(result); // - [1,2,3,4,5]
分析:这里主要是借助迭代功能实现数组的扩展,判断当前元素是否已经添加到数组中,如果不存在就从尾部添加,这两个方法在去重方法中应该算比较简单高效的。
4.按属性对Object分类
var person = [
{
name: 'xiaoming',
age: 18
},{
name: 'xiaohong',
age: 17
},{
name: 'xiaogang',
age: 17
}
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
var groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);
运行结果:
5.对对象的属性求和
let people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
];
let result = people.reduce((a,b) =>{
a = a + b.age;
return a;
},0)
console.log(result) // - 结果:61
分析:
这里主要就是利用reduce第一个参数是迭代,可以通过初始化这个参数的数据类型,达到想实现的效果。
6.二维数组的处理
let arr = [
['红色','黑色','白色'],
['16G','32G'],
['移动版','联通版']
]
结果:
[ [ '红色', '16G', '移动版' ],
[ '红色', '16G', '联通版' ],
[ '红色', '32G', '移动版' ],
[ '红色', '32G', '联通版' ],
[ '黑色', '16G', '移动版' ],
[ '黑色', '16G', '联通版' ],
[ '黑色', '32G', '移动版' ],
[ '黑色', '32G', '联通版' ],
[ '白色', '16G', '移动版' ],
[ '白色', '16G', '联通版' ],
[ '白色', '32G', '移动版' ],
[ '白色', '32G', '联通版' ]
]
- 步骤一:第一组处理
//案例3:
let arr = [
['红色','黑色','白色'],
['16G','32G']
]
//reduce
let s = arr.reduce( (res,current,index)=>{
//处理第一组
if(index == 0){
//遍历第一组
current.forEach(item=>{
res.push([item])
})
}
return res
} ,[])
console.info(s)
- 步骤二:之后处理
let arr = [
['红色','黑色','白色'],
['16G','32G'],
['移动版','联通版']
]
//reduce
let s = arr.reduce( (res,current,index)=>{
//处理第一组
if(index == 0){
//遍历第一组
current.forEach(item=>{
res.push([item])
})
} else {
//其他行
// res 获得第一行准备数组
let newArr = []
res.forEach(tempArr=>{
// 当前行获得需要处理
current.forEach(ele=>{
// console.info([...tempArr , ele])
newArr.push([...tempArr, ele ])
})
})
res = newArr
}
return res
} ,[])
7.二维数组 处理结果为对象
let arr = [
['红色','黑色','白色'],
['16G','32G'],
['移动版','联通版']
]
结果:
[ {'attr0': '红色', 'attr1':'16G', 'attr2':'移动版' },
{'attr0': '红色', 'attr1':'16G', 'attr2':'联通版' },
{'attr0': '红色', 'attr1':'32G', 'attr2':'移动版' },
{'attr0': '红色', 'attr1':'32G', 'attr2':'联通版' },
{'attr0': '黑色', 'attr1':'16G', 'attr2':'移动版' },
{'attr0': '黑色', 'attr1':'16G', 'attr2':'联通版' },
{'attr0': '黑色', 'attr1':'32G', 'attr2':'移动版' },
{'attr0': '黑色', 'attr1':'32G', 'attr2':'联通版' },
{'attr0': '白色', 'attr1':'16G', 'attr2':'移动版' },
{'attr0': '白色', 'attr1':'16G', 'attr2':'联通版' },
{'attr0': '白色', 'attr1':'32G', 'attr2':'移动版' },
{'attr0': '白色', 'attr1':'32G', 'attr2':'联通版' }
]
let arr = [
['红色','黑色','白色'],
['16G','32G'],
['移动版','联通版']
]
//reduce
let s = arr.reduce( (res,current,index)=>{
//第一个数组
if(index == 0) {
current.forEach(ele=>{
res.push({['attr' + index] : ele })
})
} else {
//其他数组
let newArr=[]
res.forEach(obj=>{
current.forEach(ele=>{
// console.info({ ...obj, ['attr'+index] : ele})
newArr.push({ ...obj, ['attr' +index] : ele})
})
})
res = newArr
}
return res
} , [])
console.info(s)
总结
reduce() 是数组的归并方法,与 forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历,但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算,这一点是其他迭代方法无法企及的。