Indexierte Sammlungen

Eine indexierte Sammlung ist eine Datenstruktur, in der Elemente gespeichert und Zugriff über nummerierte Indexe. In einer indexierten Sammlung gespeicherte Werte: zugewiesenen nummerierten Indexen beginnend bei 0, einem Muster namens „Null-Indexierung“. Sie können dann auf die in einer indexierten Sammlung gespeicherten Werte zugreifen, indem Sie ihre Indexe.

Array

Ein Array ist ein Container, der null oder mehr Werte eines beliebigen Datentyps enthalten kann. einschließlich komplexer Objekte und Arrays. In einem Array gespeicherte Werte sind manchmal als „Elemente“ bezeichnet des Arrays an.

Array erstellen

Wie bei primitiven Datentypen gibt es zwei Ansätze zum Erstellen eines Arrays: Ein Arrayliteral oder durch Aufrufen des integrierten Array()-Konstruktors von JavaScript mit new Array(). Das Zuweisen eines Arrays zu einer Variablen ermöglicht eine hohe Portabilität und iterable Art der Zuweisung mehrere Werte in eine einzige Kennung.

Bei der Array-Literalsyntax werden 0 oder mehr von eckigen Klammern ([]) verwendet kommagetrennte Datenwerte:

const myArray = [];

In der Syntax des Array-Konstruktors wird das integrierte Array-Objekt von JavaScript als -Konstruktor mit dem Schlüsselwort new:

const myArray = new Array();

Sowohl mit der Array-Literal- als auch mit der Array-Konstruktorsyntax können Sie ein Array mit Informationen erhalten, auch wenn sich die Syntax geringfügig in der Art und Weise unterscheidet, definiert sind. Bei der Syntax des Arrayliterals werden kommagetrennte Werte zwischen den eckige Klammern zu, was genauso aussieht wie das resultierende Array:

const myArray = [ true, null, "String", false ];

myArray;
> [ true, null, "String", false ]

Die Arraykonstruktor-Syntax verwendet kommagetrennte Werte als Argumente, wobei ein Besondere verhaltensbezogene Ausnahme:

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, nicht der nullten Position im resultierenden Array zugewiesen. Stattdessen wird ein Array mit dieser Anzahl von leeren Slots für Werte erstellt. Dies erzwingt keine für das Array. Elemente können auf die gleiche Weise hinzugefügt und entfernt werden. wie bei einem Array-Literal.

// 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 als "dünnbesetzte Arrays" bezeichnet) sind etwas Besonderes. Cases. Anstelle eines undefined- oder expliziten null-Werts, leer werden oft, aber nicht immer, an anderer Stelle imundefined Sprache.

Sie können versehentlich ein dünnbesetztes Array mit der Arrayliteral-Syntax erstellen, indem Sie durch Auslassen eines Werts zwischen Kommas, wenn Sie ein Arrayliteral erstellen:

const myArray = [ true,, true, false ];

myArray;
> Array(4) [ true, <1 empty slot>, true, false ]

Auch wenn ein leerer Slot nicht in allen Kontexten als sinnvoller Wert behandelt wird, in die Gesamtlänge des Arrays eingerechnet wird, unerwartete Ergebnisse beim Iterieren über eines Arrays:

const myArray = [ 1,, 3, 4 ];

myArray.length;
> 4

for( const myValue of myArray ) {
  console.log( myValue + 10 );
}
> 11
> NaN
> 13
> 14

Dieses Verhalten ist ein Ausnahmefall von einigen der ersten Designentscheidungen von JavaScript. Vermeiden Sie die Verwendung von dünnbesetzten Arrays in der modernen Entwicklung.

Wie bei Primitiven kann ein Array-Literal übernimmt Eigenschaften und Methoden vom entsprechenden Konstruktor. Da ein Array eine Sonderform eines Objekts ist, können die Array-Literal-Syntax new Array()-Syntax erzeugen funktionell identische Ergebnisse: ein Objekt, das übernimmt seinen Prototyp vom Array-Konstruktor.

const arrayLiteral = [];
const arrayConstructor = new Array();

typeof arrayLiteral;
> "object"

arrayLiteral;
> Array []
    length: 0
    <prototype>: Array []

typeof arrayConstructor;
> "object"

arrayConstructor;
> Array []
    length: 0
    <prototype>: Array []

Weil die beiden Ergebnisse identisch sind und die Array-Literal-Syntax kürzer ist. und literal verwenden, empfehlen wir dringend, immer die Array-Literal-Syntax new Array()-Syntax.

Auf Arraywerte zugreifen

Sie können auf einzelne Elemente innerhalb des Arrays zugreifen, indem Sie Klammer-Notation, Reihe von Klammern ([]) hinter dem Array oder seiner Kennung, die einen Nummer, 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, Sie können also keinen beliebigen String als Index verwenden. Die numerischen Werte -Werte, die für den Zugriff auf Elemente in einem Array verwendet werden, in einen String-Wert hinter die Szenen aus, was bedeutet, dass Sie einen Zeichenfolgenwert verwenden können, der nur numerische Zeichen:

const myArray = [ "My string", 50, true ];

myArray[ 2 ];
> true

myArray[ "2" ];
> true

Der Versuch, auf ein Element außerhalb der im Array definierten Elemente zuzugreifen, führt zu undefined ist kein Fehler:

const myArray = [ "My string", 50, true ];

myArray[ 9 ];
> undefined

Zuweisung wird gelöscht

Das destruktive Zuweisung ist eine prägnante Methode, um eine Reihe von Werten Arrays oder Objekten zu erstellen und diese einer Reihe von ein Prozess, der manchmal als „Entpacken“ bezeichnet wird, der ursprünglichen Datenstruktur, auch wenn das ursprüngliche Array oder Objekt nicht geändert wird.

Beim Löschen der Zuweisung wird eine Array- oder objektähnliche Liste von IDs verwendet, Werte zu verfolgen. In seiner einfachsten Form, dem Bindungsmuster, -destruktiv wird jeder Wert aus dem Array oder Objekt entpackt und einer entsprechende Variable, die mit let oder const (oder var) initialisiert wurde:

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 die Struktur eines Objekts 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

Arrays werden in sequenzieller Reihenfolge von links nach rechts zerstört. Jedes in der destruktiven Zuweisung entspricht dem Element des Array 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 IDs, die in der destruktiven Zuweisung verwendet werden, stimmen mit den Schlüsseln der enthalten, werden diese IDs mit der entsprechenden Property unabhängig von ihrer angegebenen Reihenfolge:

const myObject = { firstValue: 1, secondValue: 2, thirdValue 3 };
const { secondValue, thirdValue, firstValue } = myObject;

firstValue;
> 1

secondValue;
> 2

thirdValue;
> 3

Elemente können übersprungen werden, indem eine Kennung weggelassen wird:

const myArray = [ 1, 2, 3 ];
const [ firstValue,, secondValue ] = myArray;

firstValue;
> 1

secondValue;
> 3

Mit der destruktiven Syntax können Sie auch Standardwerte für den Fall einer value ist entweder ein leerer Slot, wie bei einem dünnbesetzten Array, oder ein undefined-Wert.

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 umgewandelt. Das bedeutet, dass "falsy"-Werte wie leer ("") oder null werden trotzdem als sinnvolle dekonstruierte Werte betrachtet:

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

Den in ES6 eingeführten Streuungsoperator (...) verwenden, um iterierbare Daten zu erweitern wie ein Array, ein String oder ein Objektliteral in einzelne Elemente umwandeln. Auf den Spread-Operator folgt unmittelbar die zu erweiternde Datenstruktur. bzw. die Kennung 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 Streuungssyntax nur in den folgenden Kontexten verwenden:

Bei Arrays und Strings wird die Streuungssyntax nur angewendet, wenn null oder mehr Argumente vorhanden sind. in einem Funktionsaufruf oder Elemente in einem Array erwartet werden. Das erste Beispiel für Die Syntax des Spread-Operators in diesem Abschnitt funktioniert, da sie ...myArray als Ein Argument für die integrierte Methode console.log.

Beispielsweise können Sie die Daten, die verteilt werden, nicht einer Variablen außerhalb ein weiteres Array:

const myArray = [ 1, 2, 3 ];
const spreadVariable = ...myArray;
> Uncaught SyntaxError: Unexpected token '...'

Zum Kopieren eines Arrays verteilen Sie das ursprüngliche Array jedoch 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 einzigen 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 , um Elemente eines Arrays als einzelne Argumente in einem Funktionsaufruf zu übergeben:

const myArray = [ true, false ];
const myFunction = ( myArgument, mySecondArgument ) => {
    console.log( myArgument, mySecondArgument );
};

myFunction( ...myArray );
> true false

Der Spread-Operator wurde erweitert, um mit Objektliteralen in ES2018. Wie bei Arrays können Sie den Streuungsoperator 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 Streuungsoperator erstellt „oberflächlich“ Kopien. Das bedeutet, dass das Feld Prototyp des ursprünglichen Objekts und nicht aufzählbar Eigenschaften.

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 { … }

Beachten Sie, dass Arrays und Objekte nicht austauschbar verwendet werden können. Sie können nicht ein Objekt in ein Array oder ein Array in ein Objekt zu verteilen.

Anbieter für Ruhezeiten

Der Operator selbst hat dieselbe Syntax, der Restoperator (...) und führt je nach Kontext, in dem sie verwendet wird, die entgegengesetzte Funktion aus. Anstelle von Erweiterung einer iterierbaren Datenstruktur in einzelne Elemente, wie in desstrukturierenden Auftrags oder als Funktionsparameter, kombiniert der Operator „rest“ in eine iterierbare Datenstruktur umwandeln. Der Name leitet sich von der Tatsache ab, um „die übrigen Elemente“ einer Reihe von Datenwerten.

Bei Verwendung mit destruktiver Zuweisung wird die Syntax als „rest-Property“ bezeichnet. Syntax.

const myArray = [ "First", "Second", "Third", "Fourth", "Fifth" ];

[ myFirstElement, mySecondElement, ...remainingElements ] = myArray;

myFirstElement;
> "First"

mySecondElement;
> "Second"

remainingElements;
> Array(3) [ "Third", "Fourth", "Fifth"]

Wird verwendet, um eine unbestimmte Anzahl von Argumenten für eine Funktion bereitzustellen, heißt die Syntax „rest parameter“ Syntax:

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%

Typierte Arrays sind eine ES6-Funktion zum Speichern strukturierter Binärdaten, wenn Sie mit hochgeladenen Dateien oder WebGL

Wie bei Symbols wird auch das %TypedArray% intrinsische Funktion (normalerweise als %TypedArray% oder @@TypedArray dokumentiert) also nicht mit einer globalen Eigenschaft verwechselt werden kann) ist keine Konstruktorfunktion in dem herkömmlichen Sinn, und Sie können sie weder mit new aufrufen noch direkt aufrufen. Stattdessen bezieht sich %TypedArray% auf eine übergeordnete Klasse von Einzelpersonen. -Konstruktoren, die jeweils mit einem bestimmten Binärdatenformat arbeiten. Die Die intrinsische %TypedArray%-Klasse bietet Attribute und Dienstprogrammmethoden, die übernehmen alle abgeleiteten %TypedArray%-Konstruktorklassen und ihre Instanzen.

Wissen testen