Array.prototype.reduce()
一、定义
1、reduce()
对数组的每一个元素(不含空元素)依次执行回调函数,该功能处理列表中的每个值(从左到右)以将其减小为单个值,实现一个“累加器”的功能。
2、reduce()
就是一个对数组进行遍历操作的方法,与for
、forEach
没有本质上的区别。
二、语法
1、语法
arr.reduce(callback)
arr.reduce(callback,initialValue)
2、参数解析
2.1、callback
回调函数中接收四个参数,分别是初始值(或者是上一次回调函数的返回值)、当前元素,当前索引,调用reduce的数组
callback(prevValue,curItem,curIndex,arr)
2.2、initialValue
在第一次调用该函数时用作第一个参数的值。如果未提供initialValue
,则使用数组的第一个元素(并且处理循环不会迭代通过)。如果reduce()
在不提供初始值的情况下调用空数组,则会收到错误消息。
2.3、对2.2进行补充,注意!
提供初始值,循环从索引为0的元素开始;
不提供初始值,数组的第一个参数设置为初始值,循环从索引为1的元素开始;
三、常用方法
1、累加
let sum = [0,1,2,3,4].reduce((prev,curItem) => prev + curItem) //10
2、累乘
let mul = [1,2,3,4].reduce((prev,curItem) => prev * curItem) //24
四、高级用法
1、累加对象数组的属性值
let arr = [{
x:1},{
x:2},{
x:3},{
x:4},{
x:5}]
let sum = arr.reduce((prev,item) => prev + item.x, 0)
console.log(sum) // 15
2、将二位数组转化为一维数组
let arr1 = [[1,2],[2,3],[4,5]]
let concatArr = arr1.reduce((prev,item) => prev.concat(item),[])
console.log(concatArr) //[1, 2, 2, 3, 4, 5]
3、将多维数组转化为一维数组
使用递归的方法
let arr3 = [1,[2,3],[4,[5,6]]]
const concatArrFn = function(arr){
return arr.reduce((prev,item) => prev.concat(Array.isArray(item) ? concatArrFn(item) : item),[])
}
console.log(concatArrFn(arr3)) //[1, 2, 3, 4, 5, 6]
4、数组去重
let arr2 = ['a','b','c','a']
let uniqueArr = arr2.reduce((prev,item) => {
if(!prev.includes(item)){
prev.push(item)
}
return prev
},[])
console.log(uniqueArr) // ["a", "b", "c"]
五、浏览器兼容性
谷歌、火狐、IE9+等浏览器都可以兼容的