Weisen Sie ein neues Array in Javascript zu
3 Antworten
tl; dr: Das erste Array hat Löcher, das zweite nicht. .map überspringt Löcher.
Wenn Sie ein spread-Element verwenden, wird das Array als iterable behandelt, d. h. Sie erhalten einen Iterator, der über das Array iteriert. Der Iterator funktioniert grundsätzlich wie eine for -Schleife, er iteriert das Array vom Index 0 bis zum Index array.length - 1 (siehe die Spezifikation für Details) und fügen Sie den Wert für jeden Index dem neuen Array hinzu. Da Ihr Array keine Werte enthält, gibt array[i] undefined für jeden Index zurück.
Das heißt, [...new Array(3)] führt zu einem Array, das im wahrsten Sinne des Wortes drei undefined -Werte enthält, im Gegensatz zu nur einem "Ersatz" -Array der Länge 3 .
Sieh den Unterschied in Chrome:
Wir nennen "spärliche Arrays" auch "Arrays mit Löchern ".
Hier ist die Crux : Viele Array-Methoden, einschließlich .map , überspringen Löcher! Sie behandeln das Loch nicht als Wert undefined , es wird vollständig ignoriert.
Sie können dies leicht überprüfen, indem Sie% console.log in den .map -Rückruf einfügen:
Und das ist der Grund, warum Ihr erstes Beispiel nicht funktioniert. Sie haben ein Sparse-Array mit nur Löchern, die .map ignoriert. Wenn Sie ein neues Array mit dem spread-Element erstellen, wird ein Array ohne Löcher erstellt, daher funktioniert .map .
arrayLength
Wenn das einzige an den Konstruktor
Arrayübergebene Argument eine Ganzzahl zwischen 0 und 2 32 -1 (inklusive) ist, gibt dies ein neues Argument zurück JavaScript-Array mit einer auf diese Nummer festgelegten Länge.
new Array(3) erstellt keine iterierbaren Werte für das erstellte Array mit der Eigenschaft .length auf 3 .
Siehe auch Nicht definierte Werte mit neuem Array () in JavaScript .
Sie können Array.from() beim ersten Beispiel verwenden erwartete Ergebnisse zurückgeben
%Vor%Der Spread-Operator erlaubt es, einen Ausdruck an bestimmten Stellen zu erweitern wo mehrere Argumente (für Funktionsaufrufe) oder mehrere Elemente (für Array-Literale) oder mehrere Variablen (für die Destrukturierung Zuordnung) erwartet.
erstellt ein Array mit den Werten undefined und .length , die auf 10 von Array(10) festgelegt sind. Dies ist bei .map()
Warum Fall 1 nicht funktioniert?
Kartenfunktion ruft Rückruffunktion in jedem Element in aufsteigender Reihenfolge
In Ihrem ersten Fall (zusammenbrechen ..),
%Vor% x ist ein Array mit nicht initialisiertem Index. Daher weiß map function nicht, wo Sie mit der Iteration Ihres Arrays beginnen sollen. Und verursacht es nicht iterieren es überhaupt (was nicht funktioniert).
Sie können es testen (in Chrome),
%Vor%Warum macht die Verwendung dieses Spread-Operators einen Unterschied?
In Ihrem zweiten Beispiel
Und schließen Sie es in eckige Klammern ein, um es richtig zu verwenden.
Also ist [...new Array(2)] eigentlich ein indiziertes Array von [undefined, undefined] .
Da Ihr Array im folgenden Beispiel indiziert wurde. Werfen wir einen Blick (in Chrome),
%Vor% Nun hat jeder Wert in x eigene Indizes. Schließlich ist map function in der Lage, darüber zu iterieren und die Callback-Funktion für jedes Element in aufsteigender Reihenfolge aufzurufen.
Tags und Links javascript arrays