¿Porqué razón no funciona el mapeo de una matriz construida en JavaScript?
Étape
Par souci de démonstration, disons que vous devez générer un tableau de nombres de 0 à 99. Comment pourriez-vous faire cela? Voici une option:
const arr = []; pour (soit i = 0; i <100; i ++) {arr [i] = i; }
Si eres como yo, ver un bucle tradicional en JavaScript te hace sentir un poco incómodo. De hecho, no he escrito un bucle tradicional en años gracias a las funciones de orden superior como mapa, filtro y reducción. Tal vez no has tenido contacto con la programmation funcional y estás pensando que la solución anterior parece estar perfectamente bien. Técnicamente lo es, pero después de haber probado la magia de las funciones de orden superior, probablemente estás pensando, "Il doit y avoir un meilleur moyen". Ma première réaction à ce problème a été: "Je sais! Je vais créer un tableau vide de longueur 100 et mapper les indices de chaque élément ». JavaScript vous permet de créer un tableau vide de longueur n avec le constructeur de tableau, comme ceci:
const arr = tableau (100);
Parfait, non? J'ai un tableau de longueur 100, donc maintenant je dois juste mapper l'index de chaque élément.
tableau de const = Array (100) .map ((_, i) => i); console.log (arr [0] === non défini); // vrai
Que se passe-t-il!? Le premier élément du tableau devrait être 0, mais il est en fait indéfini!
Explication
Il y a une distinction technique importante que je dois faire ici pour expliquer pourquoi cela s'est produit. En interne, les tableaux JavaScript sont des objets, avec des nombres comme clés. Par exemple:
['a', 'b', 'c']
est essentiellement équivalent à cet objet:
{0: 'a', 1: 'b', 2: 'c', longueur: 3}
Lorsque vous accédez à l'élément à l'index 0 d'un tableau, vous n'accédez en fait qu'à une propriété d'objet dont la clé est 0. Ceci est important car lorsque vous considérez les tableaux comme des objets en conjonction avec la façon dont ces fonctions sont implémentées inquiétez-vous, j'ai fait cette partie pour vous), la cause de notre problème a du sens.
Lorsque vous créez un nouveau tableau avec le constructeur de tableau, un nouvel objet de tableau est créé avec sa propriété length définie sur la valeur que vous avez transmise, mais sinon, l'objet est vide. Il n'y a pas de clé d'index dans la représentation d'objet du tableau.
{// Aucune clé d'index! longueur: 100}
Vous obtenez indéfini lorsque vous essayez d'accéder à la valeur du tableau à l'index 0, mais ce n'est pas que la valeur indéfinie est stockée à l'index 0, c'est que le comportement par défaut en JavaScript est de renvoyer undefined si vous essayez d'accéder à la valeur d'un objet pour une clé qui n'existe pas.
Il arrive que les fonctions d'ordre supérieur mappent, réduisent, filtrent et itèrent sur les clés d'index de l'objet tableau de 0 à longueur, mais le rappel n'est exécuté que si la clé existe dans l'objet. Cela explique pourquoi notre callback n'est jamais appelé et que rien ne se passe lorsque nous appelons la fonction map sur le tableau - il n'y a pas de clés d'index!
Solution
Comme vous le savez déjà, nous avons besoin d'un tableau dont la représentation interne des objets contient une clé pour chaque nombre de 0 à longueur. La meilleure façon de faire est de répartir le tableau dans un tableau vide.
const arr = [... Array (100)]. map ((_, i) => i); console.log (arr [0]); // 0
La répartition du tableau dans un tableau vide donne un tableau rempli d'éléments non définis à chaque index.
{0: indéfini, 1: indéfini, 2: indéfini, ... 99: indéfini, longueur: 100}
En effet, l'opérateur d'étendue est plus simple que la fonction de carte. Il boucle simplement le tableau (ou tout autre itérable, vraiment) de 0 à la longueur et crée une nouvelle clé d'index sur le tableau attaché avec la valeur renvoyée par le tableau de dispersion à l'index actuel. Puisque JavaScript renvoie des informations non définies de notre tableau de hachage dans chacun de ses index (rappelez-vous qu'il le fait par défaut car il n'a pas la clé d'index pour cette valeur), nous nous retrouvons avec un nouveau tableau qui est en fait rempli de clés de index et donc mappable (et réductible, filtrable et adapté à chacun).
conclusion
Nous avons découvert certaines des implications de la représentation interne des tableaux sous forme d'objets en Javascript, et nous avons appris la meilleure façon de créer des tableaux de longueur arbitraire remplis de la valeur dont vous avez besoin.
Como siempre, puedes seguir navegando en esta la toile donde hallarás los mejores cursos en JavaScript.
