Comment les fonctions d'ordre supérieur telles que .map() fonctionnent-elles dans JavaScript ?

Question

De nos jours, tout le monde essaie d'utiliser ces fonctions d'ordre supérieur pour obtenir des résultats prometteurs en écrivant moins de code. Mais je veux savoir comment ces fonctions fonctionnent en interne.

Supposons que j'écrive quelque chose de similaire

var number = [16, 25, 36];
var résultats = nombres.map(Math.sqrt);
console.log(résultats); // [4, 5, 6]

Je sais que chaque élément du tableau "number" est itéré un par un, mais comment ?

J'ai essayé de le rechercher, mais je n'ai pas encore obtenu de réponse satisfaisante.

Answer 1

Je pense que chaque fournisseur devrait suivre les Spécifications

Une implémentation réelle (par exemple V8) peut être un peu complexe, voir cette réponse pour commencer. Vous pouvez également vous référer au code source de la v8 dans github, mais il n'est peut-être pas facile d'en comprendre une partie de manière isolée.

Citant la réponse ci-dessus :

Spécification ES2015 :

1. Soit O ToObject (this valeur).
2. ReturnIfAbrupt(O).
3. Que len soit ToLength(Get(O, "length")).
4. ReturnIfAbrupt(len).
5. Si IsCallable(callbackfn) est false, une exception TypeError est levée.
6. Si thisArg est fourni, laissez T être thisArg sinon laissez T être indéfini.
7. Soit A ArraySpeciesCreate(O, len).
8. ReturnIfAbrupt(A).
9. Que k soit 0.
10. Répétez pendant que k len
    1. Que Pk soit ToString(k).
    2. Laissez kPresent être HasProperty(O, Pk).
    3. ReturnIfAbrupt(kPresent).
    4. Si kPresent est true, alors
       1. Que kValue soit Get(O, Pk).
       2. ReturnIfAbrupt(kValue).
       3. Laissez mappedValue être Call(callbackfn, T, «kValue, k >, ou ».
       4. ReturnIfAbrupt(mappedValue).
       5. Que State soit CreateDataPropertyOrThrow(A, Pk, mappedValue).
       6. ReturnIfAbrupt(status).
    5. Augmentez k de 1.
11. Retour à A.

Answer 2

.map Juste une méthode qui accepte un rappel, appelle le rappel pour chaque élément du tableau et attribue la valeur au nouveau tableau. Cela n'a rien de spécial. Vous pouvez même facilement le faire vous-même :

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]