使用ES5 reduce()方法的一点小注意事项

水深无声 2022-09-27 04:56 232阅读 0赞

ES5数组方法 reduce()方法想必大家不会陌生，MDN上有详细的介绍，官方介绍是

> 对累加器和数组的每个值 (从左到右)应用一个函数，以将其减少为单个值。

用起来也不难理解，以下面一个例子为例：

let sum = [0, 1, 2, 3].reduce(function(acc, val) { 
      return acc + val;
    }, 0);
    
    console.log(sum);
    // 6

看起来就是将上次的输出作为下一个函数的acc(accumulator)参数输出，同时当前操作的数组元素值为val。一直想起来就是这样，也用它做过一些数组操作，但今天在做一个算法时才发现以前的理解有一点点小误区，就是他的初始val的问题。  
MDN上对参数的描述是这样的

> arr.reduce(callback,\[initialValue\])  
> callback  
> 执行数组中每个值的函数，包含四个参数  
> 　accumulator  
> 　上一次调用回调返回的值，或者是提供的初始值（initialValue）  
> 　currentValue  
> 　数组中正在处理的元素  
> 　currentIndex  
> 　数据中正在处理的元素索引，如果提供了 initialValue ，从0开始；否则从1开始  
> 　array  
> 　调用 reduce 的数组  
> initialValue  
> 可选项，其值用于第一次调用 callback 的第一个参数。

问题的关键在下面这句话。

> 回调函数第一次执行时，accumulator 和 currentValue 的取值有两种情况：调用 reduce 时提供initialValue，accumulator 取值为 initialValue ，currentValue 取数组中的第一个值；没有提供 initialValue ，accumulator 取数组中的第一个值，currentValue 取数组中的第二个值。

也就是说，你如果有业务需求对其中的数组的每个值做操作，单纯在方法回调里面对val操作实际上是操作不了数组的第一个值的。那么就应该用别的方法来解决，比如笔者是要建立一个空对象，然后通过取val来添加对象属性，那么我可以将空对象作为initialValue传入，这样就currentValue可以取得数组第一个值了，或者在代码里做一个判断，当index为1时，取此时的acc作为对象第一个属性，然后再继续后面的操作。