Eine indexierte Sammlung ist eine Datenstruktur, in der Elemente gespeichert und über nummerierte Indexe abgerufen werden. Den in einer indexierten Sammlung gespeicherten Werten werden ab 0
nummerierte Indexe zugewiesen, ein Muster namens „Nullindexierung“.
Anschließend können Sie auf die in einer indexierten Sammlung gespeicherten Werte zugreifen, indem Sie auf deren Indexe verweisen.
Array
Ein Array ist ein Container, der null oder mehr Werte eines beliebigen Datentyps enthalten kann, einschließlich komplexer Objekte oder anderer Arrays. In einem Array gespeicherte Werte werden manchmal als „Elemente“ des Arrays bezeichnet.
Array erstellen
Wie bei primitiven Datentypen gibt es zwei Ansätze, um ein Array zu erstellen: als Arrayliteral oder durch Aufrufen des integrierten Array()
-Konstruktors von JavaScript mit new Array()
. Durch das Zuweisen eines Arrays zu einer Variablen ist dies sehr gut übertragbar und iterierbar, um einer einzelnen Kennung mehrere Werte zuzuweisen.
Die Arrayliteralsyntax verwendet Klammern ([]
), die null oder mehr kommagetrennte Datenwerte umgeben:
const myArray = [];
Die Array-Konstruktorsyntax verwendet das in JavaScript integrierte Array
-Objekt als Konstruktor mit dem Schlüsselwort new
:
const myArray = new Array();
Mit der Syntax des Arrayliterals und des Arraykonstruktors können Sie ein Array beim Erstellen mit Informationen füllen. Die Syntax dieser Werte unterscheidet sich jedoch geringfügig in der Definition dieser Werte. In der Arrayliteralsyntax werden zwischen den Klammern kommagetrennte Werte verwendet, was genauso aussieht wie das resultierende Array:
const myArray = [ true, null, "String", false ];
myArray;
> [ true, null, "String", false ]
Die Arraykonstruktorsyntax verwendet kommagetrennte Werte als Argumente, mit einer speziellen Verhaltensausnahme:
const myArray = new Array( true, null, "String", false );
myArray;
> Array(4) [ true, null, "String", false ]
Wenn ein einzelner numerischer Wert an den Konstruktor Array
übergeben wird, wird dieser Wert nicht der nullten Position im resultierenden Array zugewiesen. Stattdessen wird ein Array mit dieser Anzahl leerer Slots für Werte erstellt. Dies birgt keine Einschränkungen für das Array. Elemente können auf die gleiche Weise hinzugefügt und entfernt werden wie mit einem Arrayliteral.
// Firefox:\
const myArray = new Array( 10 );
myArray;
> Array(10) [ <10 empty slots> ]
// Chrome:
const myArray = new Array( 10 );
myArray;
> (10) [empty × 10]
Arrays mit leeren Slots (manchmal auch als „dünnbesetzte Arrays“ bezeichnet) sind Sonderfälle. Anstelle eines undefined
- oder expliziten null
-Werts werden leere Slots häufig, aber nicht immer, an anderer Stelle in der Sprache als undefined
-Werte behandelt.
Sie können versehentlich ein dünnbesetztes Array mit Array-Literal-Syntax erstellen, indem Sie beim Erstellen eines Arrayliterals einen Wert zwischen Kommas auslassen:
const myArray = [ true,, true, false ];
myArray;
> Array(4) [ true, <1 empty slot>, true, false ]
Obwohl dies nicht in allen Kontexten als aussagekräftiger Wert gilt, fließt ein leerer Slot in die Gesamtlänge des Arrays ein. Dies kann beim Iterieren der Werte eines Arrays zu unerwarteten Ergebnissen führen:
const myArray = [ 1,, 3, 4 ];
myArray.length;
> 4
for( const myValue of myArray ) {
console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14
Dieses Verhalten ist Teil der ersten Designentscheidungen von JavaScript. Vermeiden Sie in der modernen Entwicklung dünnbesetzte Arrays.
Wie bei Primitiven übernimmt ein Arrayliteral Eigenschaften und Methoden vom entsprechenden Konstruktor.
Da ein Array eine spezielle Objektform ist, erzeugen die Arrayliteralsyntax und die new Array()
-Syntax funktional identische Ergebnisse: ein Objekt, das seinen Prototyp vom Array
-Konstruktor übernimmt.
const arrayLiteral = [];
const arrayConstructor = new Array();
typeof arrayLiteral;
> "object"
arrayLiteral;
> Array []
length: 0
<prototype>: Array []
typeof arrayConstructor;
> "object"
arrayConstructor;
> Array []
length: 0
<prototype>: Array []
Da die beiden Ergebnisse identisch sind und die Arrayliteralsyntax kürzer und literal ist, empfehlen wir dringend, immer die Arrayliteralsyntax anstelle der new Array()
-Syntax zu verwenden.
Auf Arraywerte zugreifen
Sie können auf einzelne Elemente innerhalb des Arrays mithilfe von eckigen Klammern ([]
) nach dem Array oder seiner Kennung zugreifen, die eine Zahl enthält, die sich auf den Index dieses Elements bezieht:
[ "My string", "My other string" ][ 1 ];
> "My other string"
const myArray = [ "My string", 50, true ];
myArray[ 0 ];
> "My string"
myArray[ 1 ];
> 50
myArray[ 2 ];
> true
Arrays in JavaScript sind nicht assoziativ, d. h., Sie können keinen beliebigen String als Index verwenden. Die numerischen Werte, die für den Zugriff auf Elemente in einem Array verwendet werden, werden jedoch im Hintergrund zu einem Stringwert erzwungen. Das bedeutet, dass Sie einen Stringwert verwenden können, der nur numerische Zeichen enthält:
const myArray = [ "My string", 50, true ];
myArray[ 2 ];
> true
myArray[ "2" ];
> true
Wenn Sie versuchen, auf ein Element zuzugreifen, das nicht im Array definiert ist, wird undefined
und kein Fehler zurückgegeben:
const myArray = [ "My string", 50, true ];
myArray[ 9 ];
> undefined
Zuweisung wird gelöscht
Das Löschen von Zuweisungen ist eine kompakte Möglichkeit, einen Wertebereich aus Arrays oder Objekten zu extrahieren und sie einer Reihe von Kennungen zuzuweisen. Dieser Vorgang wird manchmal als „Entpacken“ der ursprünglichen Datenstruktur bezeichnet, wobei das ursprüngliche Array oder Objekt dabei nicht geändert wird.
Beim Löschen von Zuweisungen wird eine Array- oder objektähnliche Liste von Kennungen verwendet, um Werte zu verfolgen. In seiner einfachsten Form, der sogenannten Bindungsmuster-Destrukturierung, wird jeder Wert aus dem Array oder Objekt entpackt und einer entsprechenden Variablen zugewiesen, die mit let
oder const
(oder var
) initialisiert wird:
const myArray = [ "A string", "A second string" ];
const [ myFirstElement, mySecondElement ] = myArray;
const myObject = { firstValue: false, secondValue: true };
const { myProp, mySecondProp } = myObject;
myFirstElement;
> "My string"
mySecondElement;
> "Second string"
myProp;
> false
mySecondProp;
> true
Verwenden Sie geschweifte Klammern ({}
), um ein Objekt zu destrukturieren, und eckige Klammern ([]
), um ein Array zu destrukturieren.
const myArray = [ false, true ];
const myObject = { firstValue: false, secondValue: true };
const [ myProp, mySecondProp ] = myObject;
> Uncaught TypeError: myObject is not iterable
const { myElement, mySecondElement } = myArray;
myElement
> undefined
mySecondElement;
> undefined
Das Löschen eines Arrays erfolgt in einer sequenziellen Reihenfolge, von links nach rechts. Jede Kennung in der destruktiven Zuweisung entspricht dem Element des Arrays mit demselben Index:
const myArray = [ 1, 2, 3 ];
const [ myElement, mySecondElement, myThirdElement ] = myArray;
myElement;
> 1
mySecondElement;
> 2
myThirdElement;
> 3
Dies ist auch das Standardverhalten beim Löschen eines Objekts. Wenn die in der destruktiven Zuweisung verwendeten IDs jedoch mit den Schlüsseln der Eigenschaften des Objekts übereinstimmen, werden diese Kennungen mit den entsprechenden Eigenschaftswerten gefüllt, unabhängig von der Reihenfolge, in der sie angegeben sind:
const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;
firstValue;
> 1
secondValue;
> 2
thirdValue;
> 3
Elemente können durch Weglassen einer Kennung übersprungen werden:
const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;
firstValue;
> 1
secondValue;
> 3
Mit der Destrukturierungssyntax können Sie auch Standardwerte zuweisen, falls ein destrukturierter Wert entweder ein leerer Slot (wie bei einem dünnbesetzten Array) oder ein undefined
-Wert ist.
const myArray = [ true, ];
const [ firstValue = "Default string.", secondValue = "Default string." ] = myArray;
firstValue;
> true
secondValue;
> "Default string."
Bei der Dekonstruktion werden Werte nicht in bestimmte Typen erzwungen. Das bedeutet, dass "falsche" Werte wie leere Strings (""
) oder null
dennoch als aussagekräftige dekonstruierte Werte betrachtet werden:
const myArray = [ false, null, 0, "",, undefined ];
const [ falseValue = true, nullValue = true, zeroValue = true, emptyStringValue = true, emptySlot = true, undefinedValue = true ] = myArray;
falseValue;
> false;
nullValue;
> null
zeroValue;
> 0
emptyStringValue;
> ""
emptySlot;
> true
undefinedValue;
> true
Spread-Operator
Mit dem in ES6 eingeführten Operator „Streuung“ (...
) können Sie iterierbare Datenstrukturen wie ein Array, einen String oder ein Objektliteral in einzelne Elemente erweitern.
Auf den Operator „Streuung“ folgt unmittelbar die Datenstruktur, die erweitert werden soll, oder die ID einer Variablen, die diese Datenstruktur enthält.
const myArray = [ 1, 2, 3 ];
console.log( ...myArray );
> 1 2 3
Die Spread-Syntax wird hauptsächlich zum Kopieren und Kombinieren von Arrays verwendet:
const myArray = [ 4, 5, 6 ];
const mySecondArray = [1, 2, 3, ...myArray ];
mySecondArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]
Sie können die Syntax für die Streuung nur in den folgenden Kontexten verwenden:
Bei Arrays und Strings gilt die verteilte Syntax nur dann, wenn null oder mehr Argumente in einem Funktionsaufruf oder Elemente in einem Array erwartet werden. Das erste Beispiel für die Syntax des Spread-Operators in diesem Abschnitt funktioniert, weil sie ...myArray
als Argument an die integrierte Methode console.log
übergibt.
Sie können beispielsweise die Daten, die verteilt werden, nicht einer Variablen außerhalb eines anderen Arrays zuweisen:
const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'
Zum Kopieren eines Arrays verteilen Sie das ursprüngliche Array in ein Arrayliteral:
const myArray = [ 1, 2, 3 ];
const spreadArray = [ ...myArray ];
spreadArray;
> Array(3) [ 1, 2, 3 ]
So führen Sie die Elemente, aus denen zwei oder mehr Arrays bestehen, zu einem einzelnen Array zusammen:
const myArray = [ 1, 2, 3 ];
const mySecondArray = [ 4, 5, 6 ];
const myNewArray = [ ...myArray, ...mySecondArray ];
myNewArray;
> Array(6) [ 1, 2, 3, 4, 5, 6 ]
Oder Elemente eines Arrays als einzelne Argumente in einem Funktionsaufruf übergeben:
const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
console.log( myArgument, mySecondArgument );
};
myFunction( ...myArray );
> true false
Der Operator „Streuung“ wurde für Objektliterale in ES2018 erweitert. Wie bei Arrays können Sie den Operator „Streuung“ verwenden, um Objekte zu duplizieren oder zusammenzuführen:
const myObj = { myProperty : true };
const mySecondObj = { ...myObj };
mySecondObj;
> Object { myProperty: true }
const myFirstObj = { myProperty : true };
const mySecondObj = { additionalProperty : true };
const myMergedObj = { ...myFirstObj, ...mySecondObj };
myMergedObj;
> Object { myProperty: true, additionalProperty: true }
Der Operator „Streuung“ erstellt „oberflächliche“ Kopien. Der Prototyp und die nicht aufzählbaren Attribute des ursprünglichen Objekts werden also nicht kopiert.
const myCustomPrototype = { protoProp: "My prototype." };
const myObj = Object.create( myCustomPrototype, {
myEnumerableProp: {
value: true,
enumerable: true
},
myNonEnumerableProp: {
value: false,
enumerable: false
}
});
const myNewObj = { ...myObj };
myObj;
> Object { myEnumerableProp: true, … }
myEnumerableProp: true
myNonEnumerableProp: false
<prototype>: Object { protoProp: "My prototype." }
myNewObj;
> Object { myEnumerableProp: true }
myEnumerableProp: true
<prototype>: Object { … }
Arrays und Objekte sind nicht austauschbar. Objekte lassen sich nicht in einem Array und ein Array in einem Objekt nicht verteilen.
Rest-Operator
Obwohl die Syntax des Operators selbst identisch ist, führt der Rest-Operator (...
) je nach Kontext, in dem er verwendet wird, die entgegengesetzte Funktion aus. Anstatt eine iterierbare Datenstruktur auf einzelne Elemente zu erweitern, wie dies beim Deaktivieren der Zuweisung oder als Funktionsparameter der Fall ist, kombiniert der Operator "rest" Elemente zu einer iterierbaren Datenstruktur. Der Name beruht auf der Tatsache, dass mit ihm "der Rest" eines Satzes von Datenwerten gesammelt wird.
Bei Verwendung mit destruktiver Zuweisung wird die Syntax als „rest-Property“-Syntax bezeichnet.
const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];
[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;
myFirstElement;
> "First"
mySecondElement;
> "Second"
remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]
Wenn eine unbestimmte Anzahl von Argumenten für eine Funktion bereitgestellt wird, wird die Syntax als „rest-Parameter“-Syntax bezeichnet:
function myFunction( ...myParameters ) {
let result = 0;
myParameters.forEach( ( myParam ) => {
result += myParam;
});
return result;
};
myFunction( 2, 2 );
> 4
myFunction( 1, 1, 1, 10, 5 );
> 18
myFunction( 10, 11, 25 );
> 46
%TypedArray%
Typisierte Arrays sind eine ES6-Funktion zum Speichern strukturierter Binärdaten, z. B. bei der Arbeit mit hochgeladenen Dateien oder WebGL.
Wie bei Symbolen ist die intrinsische Funktion %TypedArray%
(normalerweise als %TypedArray%
oder @@TypedArray
dokumentiert, damit sie nicht mit einer globalen Eigenschaft verwechselt werden kann) keine Konstruktorfunktion im herkömmlichen Sinn. Sie kann weder mit new
noch direkt aufgerufen werden.
Stattdessen bezieht sich %TypedArray%
auf eine übergeordnete Oberklasse einzelner Konstruktoren, die jeweils mit einem bestimmten Binärdatenformat arbeiten. Die interne %TypedArray%
-Basisklasse bietet Attribute und Dienstprogrammmethoden, die alle abgeleiteten %TypedArray%
-Konstruktoren und ihre Instanzen übernehmen.
Wissen testen
Was gibt `myArray[1]` zurück, wenn `const myArray = [ 30, 50, 70 ];` zurückgegeben wird?
70
Was gibt `myArray[9]` zurück, wenn `myArray` drei Werte enthält?
Undefined
9
Null