随着 ECMAScript 11 的发布，Array.reduce() 方法也迎来了一些新特性，例如第二个参数将可以是可选的 initial value，还有可选的 thisArg 参数。
然而，这些新特性带来了潜在的陷阱，尤其是在使用 initial value 时。本文将详细讲解这些问题，并提供解决方案。
关于 initial value
在介绍潜在的陷阱之前，我们先来看一下 initial value 是什么。在常规情况下，reduce() 方法的语法如下：
----------------------- ---------------
其中，callback 是一个回调函数，用于对数组中的每一项进行处理，initialValue 是一个可选的初始值。
如果省略了 initial value，则 reduce() 会从数组的第一项开始遍历，callback 的第一个参数是数组的第一项，第二个参数是数组的第二项，以此类推。
如果指定了 initial value，则 reduce() 会从初始值开始遍历，callback 的第一个参数是初始值，第二个参数是数组的第一项，以此类推。
潜在的陷阱
既然 initial value 是可选的，那么我们就需要特别注意其使用。假设我们有一个数组，要计算其中所有元素的和，我们可以这样实现：
----- --- - --- -- -- -- --- ----- --- - ------------------ ---- -- ----- - ----- ----------------- -- --
在这个例子中，我们没有指定 initial value，因此 reduce() 会从数组的第一项开始遍历，callback 的第一个参数是数组的第一项，第二个参数是数组的第二项，以此类推。
现在，我们来尝试使用 initial value：
----- --- - --- -- -- -- --- ----- --- - ------------------ ---- -- ----- - ---- --- ----------------- -- --
在这个例子中，我们给 reduce() 方法传入了 initial value 为 0。答案仍然是 15，看起来一切都很正常。
然而，如果我们再来一个例子，就可以看到问题了：
----- --- - --- -- -- -- --- ----- --- - ------------------ ---- -- ----- - ---- ---- ----------------- -- -------
在这个例子中，我们传入的 initial value 是一个空字符串。答案却是 "12345"，这显然不是我们想要的结果。
为什么会这样呢？这是因为，我们的 initial value 是一个空字符串，而 reduce() 方法默认会将它的类型作为计算的类型，并且将第一项作为第一个操作数。因此，我们实际上会得到一个字符串连接（string concatenation）而不是数字相加（numeric addition）。
这个陷阱可能会引起一些意想不到的问题，特别是当 initial value 是一个非常复杂的类型时。因此，我们需要特别注意 initial value 的使用。
如何解决这个问题
为了解决这个问题，我们需要明确指定 initial value 的类型，以及如何进行计算。在上面的例子中，我们期望的结果是数字相加，而不是字符串连接。因此，我们需要将 initial value 改为数值类型的 0：
----- --- - --- -- -- -- --- ----- --- - ------------------ ---- -- ----- - ---- --- ----------------- -- --
另外，如果 initial value 是一个复杂类型，例如对象或数组，我们需要特别注意其使用。如果 initial value 是一个引用类型，那么 reduce() 方法会使用这个引用，而不是创建一个新的实例。因此，如果我们在 callback 中修改了这个引用类型，那么它会影响到后面的计算。
为了避免这个问题，我们可以传入一个新的引用类型作为 initial value，或者在 callback 中使用一个新的实例：
----- --- - -- ------ - -- - ------ - -- - ------ - --- ----- --- - ------------------ ----- -- - ----- ------ - - ------ ---------- - - -- ------ ---------- -------- -- ---- ----------------- -- -- ------ - -- - ------ - -- - ------ - --
在这个例子中，我们使用一个空数组作为 initial value，并在 callback 中创建了一个新的对象实例，以避免在计算中修改原始引用类型。
结论
ES11 中的新特性为 Array.reduce() 增加了很多便利性，但也带来了一些潜在的陷阱。特别是在使用 initial value 时，需要特别小心，以避免类型转换和引用类型的问题。
因此，在使用 Array.reduce() 方法时，我们应该清楚地指定 initial value 的类型和计算方式，以避免出现不必要的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672462a92e7021665e1340b9