js_reduce for javascript

文章目录

• reduce语法
• • reducer
  • reduce()
• reduce()的运行过程
• • • reduce()的运行过程
    • reducer
    • result
  • 综合测试代码
  • MDN example
• 往往地

reduce语法

(method) Array<number>.reduce(callbackfn: (previousValue: number, currentValue: number, 
currentIndex: number, array: number[]) => number): number (+2 overloads)
Calls the specified callback function for all the elements in an array. 
The return value of the callback function is the accumulated result, 
and is provided as an argument in the next call to the callback function.
 
@param callbackfn — A function that accepts up to four arguments. 
The reduce method calls the callbackfn function one time for each element in the array.
 
@param initialValue — If initialValue is specified, 
it is used as the initial value to start the accumulation.
 The first call to the callbackfn function provides this value as an argument instead of an array value.

reducer

reducer(或者称之为callbackFunction)
可以被比喻做工具(榔头)

reduce()

reducer()可以被比喻为工人(拿着榔头的工人)
执行过程和效果:
可以比喻为工人操纵榔头击打钉子到模板中,次数类比为数组中的元素数目,钉子钉入的深度视为accumulator(操作的结果);调用了array.size次后,得到结果(钉入的长度为全长)

reduce()的运行过程

reduce()的运行过程

reduce() 如何运行

假如运行下段 reduce()代码：

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});

查看中间结果也是可以的

[0, 1, 2, 3, 4].reduce(function (accumulator, currentValue, currentIndex, array) {
    stepRes = accumulator + currentValue
    console.log('accumulator,currentValue,currentIndex,array:', accumulator, currentValue, currentIndex, array)
    console.log('index', currentIndex, ":", stepRes)
    return accumulator + currentValue;
});

更加体现层次感的写法

reducer

reducer = function (accumulator, currentValue, currentIndex, array) {
    stepRes = accumulator + currentIndex
    console.log('accumulator,currentValue,currentIndex,array:', accumulator, currentValue, currentIndex, array)
    console.log("after executing", 'index', currentIndex, ":", stepRes)
    return accumulator + currentValue;
}

单参数reduce()

[1,2,3,4].reduce(reducer)

启用第二个可选的参数

const initialValue = 10;
[1, 2, 3, 4].reduce(reducer, initialValue);

result

综合测试代码

let reducer = function (accumulator, currentValue, currentIndex, array) {
    stepRes = accumulator + currentValue
    console.log('accumulator,currentValue,currentIndex,array:', accumulator, currentValue, currentIndex, array)
    console.log("after executing", 'index', currentIndex, ":", stepRes)
    return stepRes;
};
console.log("debugin reducer...");
 
[11, 2, 1, 3, 4].reduce(reducer);
console.log("---------------------------------");
[0, 1, 2, 3, 4].reduce(reducer);
console.log("---------------------------------");
 
const initialValue = 10;
[0, 1, 2, 3, 4].reduce(reducer, initialValue);

MDN example

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;
 
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
 
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

往往地

reducer的签名中由4个形参(但后面两个可以省略,而且不常用)
此外,reduce()可以传入两个参数,且第二个可以省略,但是,这第二个数组我们不建议省略,为其提供一个初始值,回事您的代码更安全.
所以,代码进程像这样子

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和为 6

累加对象数组里的值

要累加对象数组中包含的值，必须提供初始值，以便各个item正确通过你的函数。

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},initialValue)
 
console.log(sum) // logs 6

你也可以写成箭头函数的形式：

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);
 
console.log(sum) // logs 6