像 .map() 这样的高阶函数在 JavaScript 内部是如何工作的？

Question

现在每个人都试图使用这些高阶函数来通过编写更少的代码来获得有希望的结果。但我想知道这些函数内部是如何工作的。

假设我写了类似的东西

var numbers = [16, 25, 36];
var results = numbers.map(Math.sqrt);
console.log(results); // [4, 5, 6]

我知道“number”数组的每个元素都在逐一迭代，但是如何？

我试图寻找它，但尚未得到满意的答案。

Answer 1

我想每个供应商都应该按照 规格

实际实现（例如 V8）可能有点复杂，请参阅此答案作为开始。您也可以参考 github 中的 v8 源码，但孤立地理解其中的一部分可能并不容易。

引用上面的答案：

ES2015 规范：

1. 设O为ToObject(this值)。
2. ReturnIfAbrupt(O)。
3. 设 len 为 ToLength(Get(O, "length"))。
4. ReturnIfAbrupt(len)。
5. 如果 IsCallable(callbackfn) 为 false，则抛出 TypeError 异常。
6. 如果提供了 thisArg，则令 T 为 thisArg；否则让T未定义。
7. 设 A 为 ArraySpeciesCreate(O, len)。
8. ReturnIfAbrupt(A)。
9. 令k为0。
10. 重复，同时 k < < len
    1. 令Pk为ToString(k)。
    2. 令kPresent为HasProperty(O, Pk)。
    3. ReturnIfAbrupt(kPresent)。
    4. 如果kPresent为true，则
       1. 令kValue为Get(O, Pk)。
       2. ReturnIfAbrupt(kValue)。
       3. 令mappedValue为Call(callbackfn, T, «kValue, k >，或»。
       4. ReturnIfAbrupt(mappedValue)。
       5. 令状态为CreateDataPropertyOrThrow（A、Pk、mappedValue）。
       6. ReturnIfAbrupt(状态)。
    5. 将k增加1。
11. 返回A。

Answer 2

.map 只是一个接受回调、为数组的每个项目调用回调并将值分配给新数组的方法。没什么特别的。您甚至可以自己轻松实现：

Array.prototype.myMap = function(callback) {
  const newArr = [];
  for (let i = 0; i < this.length; i++) {
    newArr.push(callback(this[i], i, this));
  }
  return newArr;
}

var numbers = [16, 25, 36];
var results = numbers.myMap(Math.sqrt);
console.log(results); // [4, 5, 6]