freeCodeCamp学习|return args.reduce((a, b) => a + b, 0);

ES6: Use the Rest Operator with Function Parameters 题目还是蛮简单的,但是这段代码对于我这样的初学者来说比较难理解,题目代码如下:

const sum = (function() { "use strict"; return function sum(x, y, z) { const args = [ x, y, z ]; return args.reduce((a, b) => a + b, 0); }; })(); console.log(sum(1, 2, 3));

理解代码的第一个难点在于弄懂函数自调用,第二个难点就是对return args.reduce((a, b) => a + b, 0); 的理解。
理解 args.reduce((a, b) => a + b, 0) 这是网上一篇对reduce方法讲解很详尽的博文: Array.reduce()学习.
要弄懂这条语句看上面这篇博文就足够了,但学有余力的话可以继续看看这两篇:
  1. 数组reduce方法的高级技巧.
  2. JavaScript学习笔记:数组reduce()和reduceRight()方法.
下面是我对代码作出的小修改,打印出reduce回调函数中的参数每一次回调后的值
const sum = (function() { "use strict"; return function sum(x, y, z) { const args = [ x, y, z ]; return args.reduce(function(a, b,currentIndex,array) { console.log(a,b, currentIndex); return a+b; } , 0); }; })(); console.log(sum(1, 2, 3)); // 6

打印结果:
0,1,0
1,2,1
3,3,2
6
【freeCodeCamp学习|return args.reduce((a, b) => a + b, 0); 】即,回调函数的执行过程如下:
回调次数 previousValue currentValue currentIndex array 返回值
第一次回调 0(这是你设置的初始值) 1(有初始值则从1开始) 0(有初始值则从0开始) [1,2,3] 1
第二次回调 1 2 1 [1,2,3] 3
第三次回调 3 3 2 [1,2,3] 6

    推荐阅读