¿Porqué razón no funciona el mapeo de una matriz construida en JavaScript?
Bühne
Nehmen wir zum Beweis an, Sie müssen ein Array von Zahlen von 0 bis 99 generieren. Wie können Sie das tun? Hier ist eine Option:
const arr = []; für (sei 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 Programmierung 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, "Es muss einen besseren Weg geben". Meine erste Reaktion auf dieses Problem war: "Ich weiß! Ich werde ein leeres Array der Länge 100 erstellen und die Indizes jedes Elements abbilden ». Mit JavaScript können Sie ein leeres Array mit einer Länge erstellen n mit dem Array-Konstruktor wie folgt:
const arr = Array (100);
Perfekt, oder? Ich habe ein Array mit einer Länge von 100, daher muss ich jetzt nur noch den Index jedes Elements zuordnen.
const array = Array (100) .map ((_, i) => i); console.log (arr [0] === undefined); // wahr
Was ist los!? Das erste Element des Arrays sollte 0 sein, aber es ist tatsächlich undefiniert!
Erläuterung
Es gibt eine wichtige technische Unterscheidung, die ich hier treffen muss, um zu erklären, warum dies passiert ist. Intern sind JavaScript-Arrays Objekte mit Zahlen als Schlüssel. Zum Beispiel:
['a', 'b', 'c']
ist im Wesentlichen gleichbedeutend mit diesem Objekt:
{0: 'a', 1: 'b', 2: 'c', Länge: 3}
Wenn Sie auf das Element am Index 0 eines Arrays zugreifen, greifen Sie tatsächlich nur auf eine Objekteigenschaft zu, deren Schlüssel 0 ist. Dies ist wichtig, da Sie Arrays als Objekte in Verbindung mit der Implementierung von Funktionen höherer Ordnung betrachten (nicht Sorge, ich habe diesen Teil für dich getan), die Ursache unseres Problems macht Sinn.
Wenn mit dem Array-Konstruktor ein neues Array erstellt wird, wird ein neues Array-Objekt erstellt, dessen Längeneigenschaft auf den von Ihnen übergebenen Wert festgelegt ist. Andernfalls ist das Objekt ungültig. Die Objektdarstellung des Arrays enthält keine Indexschlüssel.
{// Keine Indexschlüssel! Länge: 100}
Sie werden undefiniert, wenn Sie versuchen, auf den Wert des Arrays bei Index 0 zuzugreifen. Es ist jedoch nicht so, dass der undefinierte Wert bei Index 0 gespeichert wird, sondern dass das Standardverhalten in JavaScript darin besteht, undefiniert zurückzugeben, wenn Sie versuchen, auf den Wert zuzugreifen eines Objekts für einen Schlüssel, der nicht existiert.
Es kommt vor, dass Funktionen höherer Ordnung die Indexschlüssel des Array-Objekts von 0 bis zur Länge abbilden, reduzieren, filtern und iterieren. Der Rückruf wird jedoch nur ausgeführt, wenn der Schlüssel im Objekt vorhanden ist. Dies erklärt, warum unser Rückruf niemals aufgerufen wird und nichts passiert, wenn wir die Map-Funktion auf dem Array aufrufen - es gibt keine Indexschlüssel!
Lösung
Wie Sie bereits wissen, benötigen wir ein Array, dessen interne Darstellung von Objekten einen Schlüssel für jede Zahl von 0 bis Länge enthält. Der beste Weg, dies zu tun, besteht darin, das Array in ein leeres Array zu verteilen.
const arr = [... Array (100)]. map ((_, i) => i); console.log (arr [0]); // 0
Das Verbreiten des Arrays in ein leeres Array führt zu einem Array, das an jedem Index mit undefinierten Elementen gefüllt ist.
{0: undefiniert, 1: undefiniert, 2: undefiniert, ... 99: undefiniert, Länge: 100}
Dies liegt daran, dass der Extent-Operator einfacher als die Kartenfunktion ist. Es schleift einfach das Array (oder ein anderes iterierbares Array) von 0 bis zur Länge und erstellt einen neuen Indexschlüssel für das angehängte Array mit dem Wert, den das Scatter-Array am aktuellen Index zurückgibt. Da JavaScript in jedem seiner Indizes undefinierte Informationen aus unserem Hash-Array zurückgibt (denken Sie daran, dass dies standardmäßig der Fall ist, da der Indexschlüssel für diesen Wert nicht vorhanden ist), erhalten wir ein neues Array, das tatsächlich mit Schlüsseln von gefüllt ist Index und daher abbildbar (und reduzierbar, filterbar und für jeden geeignet).
Fazit
Wir haben einige der Auswirkungen der internen Darstellung von Arrays als Objekte in Javascript entdeckt und den besten Weg gefunden, Arrays beliebiger Länge zu erstellen, die mit dem von Ihnen benötigten Wert gefüllt sind.
Como siempre, puedes seguir navegando en esta Netz donde hallarás los mejores cursos en JavaScript.
