乐趣区

JS中reduce方法

定义和用法

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose
reduce() 对于空数组是不会执行回调函数的

浏览器支持
支持谷歌、火狐、ie9 以上等主流浏览器
语法
array.reduce(function(prev, current, currentIndex, arr), initialValue)

prev:函数传进来的初始值或上一次回调的返回值
current:数组中当前处理的元素值
currentIndex:当前元素索引
arr:当前元素所属的数组本身
initialValue:传给函数的初始值

初始值为数值:
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce(function (prev, current) {
return prev+current
}, 0)
console.log(sum) //55
reduce 根据函数传进来的初始值,不断回调叠加最终算出数组的和
初始值为对象:
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce(function (prev, current) {
prev.count = prev.count+current
return prev
}, {count: 0})
console.log(sum) //{count: 55}
如果初始值为对象的话,返回的也是一个对象
初始值为数组:
const str = ‘hello’
const newstr = str.split(”).reduce(function (prev, current) {
const obj = {};
obj[current] = current;
prev.push(obj)
return prev;
}, [])
console.log(newstr)
结果为:
[{
h: ‘h’
},{
e: ‘e’
},{
l: ‘l’
},{
l: ‘l’
},{
o: ‘o’
}]
如果初始值为数组,则返回的也是数组
reduce 应用:
{
function func1(a) {
return a*10;
}

function func2(b) {
return b*2
}

const test1 = func1(2)
const test2 = func2(test1)
console.log(test2) //40
}
这里我们需要先执行方法 func1 再根据 func1 返回的值,然后执行方法 func2,我们有时候会碰到不止两个方法一起,如果是多个呢,这个时候就要用到 reduce 来处理了
function func1(a) {
return a*10;
}

function func2(b) {
return b*2
}

function func3(c) {
return c/2;
}
const compose = (…func) => (…init) => {
if(func.length >= 2){
return func.reduce((prev, curr)=>{
prev = curr(prev)
return prev;
}, …init)
}
return func(…init);
}

const a1 = compose(func1,func2)(2);
console.log(a1) //40
const a2 = compose(func1,func2,func3)(2);
console.log(a2) //20

退出移动版