当前位置: 首页 > 工具软件 > Args.js > 使用案例 >

return args.reduce((a, b) => a + b, 0);

严高峻
2023-12-01

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

即,回调函数的执行过程如下:

回调次数previousValuecurrentValuecurrentIndexarray返回值
第一次回调0(这是你设置的初始值)1(有初始值则从1开始)0(有初始值则从0开始)[1,2,3]1
第二次回调121[1,2,3]3
第三次回调332[1,2,3]6
 类似资料: