像 .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]