Indexierte Sammlungen

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