reduce的api说明如下:
翻译如下:
1.个人理解:就是声明一个数组,数组里的每个元素都有指定的回调函数及等于声明了一系列回调函数,循环调用这些回调函数,且前后的回调函数之间拥有联系。
2.参数说明:① 开始循环时previousValue为数组第一个元素,currentValue为数组第二个元素,currentIndex为currentValue值在数组中位置。initialValue:初始值。
② 再次循环时,previousValue为回调函数上一次返回值,currentValue为上一次currentValue+1,currentIndex为currentValue值在数组中位置。
3.案例说明
① 不带初始值时的执行, 循环次数=数组长度-1
const arry: number[] = [3, 2, 10, 9];
arry.reduce((previousValue, currentValue, currentIndex, array) => {
console.log(JSON.stringify(previousValue));
console.log(JSON.stringify(currentValue));
console.log(JSON.stringify(currentIndex));
console.log(JSON.stringify(array));
console.log('------------分割线----------');
return 10;
});
输出:
3
2
1
[3,2,10,9]
------------分割线----------
10
10
2
[3,2,10,9]
------------分割线----------
10
9
3
[3,2,10,9]
------------分割线----------
② 带初始值时的执行 循环次数=数组长度
const arry: number[] = [3, 2, 10, 9];
arry.reduce((previousValue, currentValue, currentIndex, array) => {
console.log(JSON.stringify(previousValue));
console.log(JSON.stringify(currentValue));
console.log(JSON.stringify(currentIndex));
console.log(JSON.stringify(array));
console.log('------------分割线----------');
return 10;
},5);
输出:
5
3
0
[3,2,10,9]
------------分割线----------
10
2
1
[3,2,10,9]
------------分割线----------
10
10
2
[3,2,10,9]
------------分割线----------
10
9
3
[3,2,10,9]
------------分割线----------
③ 数字数组实现累加功能 循环次数=数组长度-1
let arry:number[] = [1,4,3,6,8];
let res:number = arry.reduce((previousValue,currentValue,currentIndex,array)=>{
console.log('------------分割线----------');
console.log(JSON.stringify(previousValue));
console.log(JSON.stringify(currentValue));
console.log(JSON.stringify(array));
return previousValue+currentValue;
})
console.log('------------打印返回结果----------');
console.log(JSON.stringify(res));
输出:
------------分割线----------
1
4
[1,4,3,6,8]
------------分割线----------
5
3
[1,4,3,6,8]
------------分割线----------
8
6
[1,4,3,6,8]
------------分割线----------
14
8
[1,4,3,6,8]
------------打印返回结果----------
22
④ 实现Promise一直向后then循环(这样就可以让异步代码循环执行起来):
拼凑Promise.then的回调函数数组,为了驱动让Promise一直then调用下去,给一个初始值Promise.resolve()
这样通过reduce函数一直向下执行
let arry:any[] = [()=>{
return Promise.resolve(1);
},
()=>{
return Promise.resolve(2);
},
()=>{
return Promise.resolve(3);
}];
let res:Promise<number> = arry.reduce((previousValue,currentValue,currentIndex,array)=>{
return previousValue.then(currentValue).then((data:number)=>{
console.log(JSON.stringify(data));
return data;
});
},Promise.resolve())
res.then(data=>{
console.log('------------打印返回结果----------');
console.log(JSON.stringify(data));
});
输出:
1
2
3
------------打印返回结果----------
3
//then函数的回调函数加上参数
let arry:any[] = [(d:number)=>{
return Promise.resolve(d+1);
},
(d:number)=>{
return Promise.resolve(d+2);
},
(d:number)=>{
return Promise.resolve(d+3);
}];
let res:Promise<number> = arry.reduce((previousValue,currentValue,currentIndex,array)=>{
return previousValue.then(currentValue).then((data:number)=>{
console.log(JSON.stringify(data));
return data;
});
},Promise.resolve(10))
res.then(data=>{
console.log('------------打印返回结果----------');
console.log(JSON.stringify(data));
});
输出:
11
13
16
------------打印返回结果----------
16
4.顺便说一下reduceRight,这是从右到左遍历
const arry: number[] = [3, 2, 10, 9];
arry.reduceRight((previousValue, currentValue, currentIndex, array) => {
console.log(JSON.stringify(previousValue));
console.log(JSON.stringify(currentValue));
console.log(JSON.stringify(currentIndex));
console.log(JSON.stringify(array));
console.log('------------分割线----------');
return 10;
});
/*输出:
9
10
2
[3,2,10,9]
------------分割线----------
10
2
1
[3,2,10,9]
------------分割线----------
10
3
0
[3,2,10,9]
------------分割线----------
*/