无法理解这段代码。 （使用reduce写map）

Question

我正在通过 MDN 文档 (Link) 阅读有关 javascript reduce 函数的信息。但是我看不懂里面的一段代码。

这是代码 (Link)：

if (!Array.prototype.mapUsingReduce) {
  Array.prototype.mapUsingReduce = function(callback, initialValue) {
    return this.reduce(function(mappedArray, currentValue, index, array) {
      mappedArray[index] = callback.call(initialValue, currentValue, index, array)
      return mappedArray
    }, [])
  }
}

[1, 2, , 3].mapUsingReduce(
  (currentValue, index, array) => currentValue + index + array.length
)

我的主要问题是： 在上面的代码中，initialValue 参数的用途是什么？即使 this 工作正常，为什么它使用 initialValue 作为 call 调用回调（因为 this 的第一个参数应该是 callback(currentValue, index, array)）。另外，是否需要 if 语句 if (!Array.prototype.mapUsingReduce) ？

Answer 1

大多数 Array.prototype 方法都带有一个可选的附加参数以及名为 thisArg 的回调函数。这是执行回调时用作 this 的值。 initialValue 是一个错误的参数名称，尤其是在 reduce 的上下文中。可能会混淆 reduce

的 initialValue parameter

在您的情况下，这无关紧要，因为您使用箭头函数作为回调。无法设置 this 值。如果您有一个普通的 function(){}，则可以使用其中的 this。

在第一个示例中，Set 对象用作 thisArg。在回调中，根据添加 currentValue 时 Set 的大小是否保持不变，检查 currentValue 是否重复。

第二个示例使用带有 sum 的对象来跟踪数组的累积总和。

Array.prototype.mapUsingReduce = function(callback, thisArg) {
  return this.reduce(function(mappedArray, currentValue, index, array) {
    mappedArray[index] = callback.call(thisArg, currentValue, index, array)
    return mappedArray
  }, [])
}

const repeatStatus = [1, 2, 2, 3].mapUsingReduce(function(currentValue) {
  return this.size === this.add(currentValue).size ? 'duplicate' : 'unique'
}, new Set()) // <-- this object is the "thisArg"

console.log(...repeatStatus)

const cumulativeSum = [1, 2, 3, 4, 5].mapUsingReduce(function(currentValue) {
  return this.sum += currentValue
}, { sum: 0 })

console.log(...cumulativeSum)

条件 if (!Array.prototype.mapUsingReduce) 用于确保该方法只创建一次而不会一次又一次地被覆盖。

Answer 2

该示例应将 initialValue 替换为 thisArg（或 _this、that..）。命名错误。

使用 call() 可以在回调中使用 this 上下文。这不是必需的。

此外，使用 if (!Array.prototype.mapUsingReduce) 您可以安全地执行两次上述代码。这也不是必需的。