一、语法
arr.reduce(callback,[initialValue])
这个方法接收两个参数:
1.要执行的函数
要执行的函数中也可传入参数,分别为
prev:上次调用函数的返回值
cur:当前元素
index:当前元素索引
arr:被遍历的数组
2.函数迭代的初始值
例子:
eg1: 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 eg2: var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; },0) //注意这里设置了初始值 console.log(arr, sum); 打印结果: 0 1 0 1 2 1 3 3 2 6 4 3 [1, 2, 3, 4] 10
如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。
注意:如果这个数组为空,运用reduce会报错,设置了初始值就不会报错。
二、reduce用法
1.reduce初级用法
求和或乘积 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.reduce高级用法
eg1:计算数组中每个元素出现的次数
let arr = ['name','age','long','short','long','name','name'] let arrResult = arr.reduce((pre,cur) =>{ console.log(pre,cur) if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre },{}) console.log(arrResult)//结果:{name: 3, age: 1, long: 2, short: 1}
eg2:去除数组中重复的元素
let arrResult = arr.reduce((pre,cur) =>{ if(!pre.includes(cur)){ pre.push(cur) } return pre; },[]) console.log(arrResult)//结果:["name", "age", "long", "short"]
eg3:对象的属性求和
let person = [ { name: 'xiaoming', age: 18 },{ name: 'xiaohong', age: 17 },{ name: 'xiaogang', age: 19 } ] let result = person.reduce((a,b) =>{ a = a + b.age; return a; },0) console.log(result)//结果:54
eg4:将二维数组转化为一维
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]
eg5:将多维数组转化为一维
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)); //[0, 1, 2, 3, 4, 5, 6, 7]
拓展:reduceRight()方法
reduceRight() 方法的功能和reduce()功能是一样的,不同的是reduceRight() 从数组的末尾向前将数组中的数组项做累加。
reduceRight() 首次调用回调函数callbackfn 时,preValue 和 curValue 可以是两个值之一。如果调用reduceRight()时提供了第二个参数,则preValue等于该参数,curValue等于数组中的最后一个值。如果没有提供,则preValue等于数组最后一个值,curValue等于数组中倒数第二个值。
参考来源:https://www.jianshu.com/p/e375ba1cfc47