Array

Beschreibung

In JavaScript sind Arrays keine Primitiven, sondern Array-Objekte mit den folgenden Kernmerkmalen:

• JavaScript-Arrays sind skalierbar und können eine Mischung aus verschiedenen Datentypen enthalten. (Wenn diese Eigenschaften unerwünscht sind, verwenden Sie stattdessen typisierte Arrays.)
• JavaScript-Arrays sind keine assoziativen Arrays, d.h. Array-Elemente können nicht mit beliebigen Zeichenfolgen als Indizes zugegriffen werden, sondern müssen mit nicht-negativen Ganzzahlen (oder deren entsprechenden Zeichenfolgenform) zugegriffen werden.
• JavaScript-Arrays sind zero-indexed: Das erste Element eines Arrays befindet sich an Index 0, das zweite an Index 1 und so weiter — und das letzte Element hat den Wert der length-Eigenschaft des Arrays minus 1.
• JavaScript Array-Kopieroperationen erstellen flache Kopien. (Alle standardmäßig eingebauten Kopieroperationen mit irgendeinem JavaScript-Objekt erstellen flache Kopien statt tiefen Kopien).

Array-Indizes

Array-Objekte können keine beliebigen Zeichenfolgen als Indizes für Elemente verwenden (wie in einem assoziativen Array), sondern müssen nicht-negative Ganzzahlen (oder deren entsprechende Zeichenfolgenform) verwenden. Das Setzen oder der Zugriff über Nicht-Ganzzahlen setzt oder ruft kein Element aus der Array-Liste selbst ab, sondern setzt oder greift auf eine Variable zu, die mit der Objekteigenschaftensammlung dieses Arrays verbunden ist. Die Objekteigenschaften des Arrays und die Liste der Array-Elemente sind getrennt, und die Traversierungs- und Mutationsoperationen des Arrays können nicht auf diese benannten Eigenschaften angewendet werden.

Array-Elemente sind Objekteigenschaften auf die gleiche Weise, wie toString eine Eigenschaft ist (genauer gesagt, toString() ist eine Methode). Dennoch wird der Versuch, auf ein Element eines Arrays wie folgt zuzugreifen, einen Syntaxfehler auslösen, weil der Name der Eigenschaft ungültig ist:

arr.0; // a syntax error

Die JavaScript-Syntax erfordert, dass Eigenschaften, die mit einer Ziffer beginnen, mithilfe von Klammernotation statt der Punktnotation zugegriffen werden. Es ist auch möglich, die Array-Indizes zu zitieren (z. B. years['2'] statt years[2]), obwohl dies normalerweise nicht notwendig ist.

Die 2 in years[2] wird durch eine implizite toString-Konvertierung von der JavaScript-Engine in eine Zeichenfolge umgewandelt. Folglich würden '2' und '02' auf zwei verschiedene Plätze im years-Objekt verweisen, und das folgende Beispiel könnte true sein:

console.log(years["2"] !== years["02"]);

Nur years['2'] ist ein tatsächlicher Array-Index. years['02'] ist eine beliebige Zeichenfolgeneigenschaft, die bei der Array-Iteration nicht besucht wird.

Beziehung zwischen Länge und numerischen Eigenschaften

Die length-Eigenschaft eines JavaScript-Arrays und die numerischen Eigenschaften sind verbunden.

Einige der integrierten Array-Methoden (z. B. join(), slice(), indexOf() usw.) berücksichtigen den Wert der length-Eigenschaft eines Arrays, wenn sie aufgerufen werden.

Andere Methoden (z. B. push(), splice() usw.) führen ebenfalls zu Aktualisierungen der length-Eigenschaft des Arrays.

const fruits = [];
fruits.push("banana", "apple", "peach");
console.log(fruits.length); // 3

Beim Setzen einer Eigenschaft auf ein JavaScript-Array, wenn die Eigenschaft ein gültiger Array-Index ist und dieser Index außerhalb der aktuellen Grenzen des Arrays liegt, aktualisiert die Engine die length-Eigenschaft des Arrays entsprechend:

fruits[5] = "mango";
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6

Das Erhöhen der length erweitert das Array, indem leere Slots hinzugefügt werden, ohne dass neue Elemente erstellt werden — nicht einmal undefined.

fruits.length = 10;
console.log(fruits); // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4]
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10
console.log(fruits[8]); // undefined

Das Verringern der length-Eigenschaft löscht jedoch Elemente.

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

Dies wird auf der Seite length weiter erklärt.

Array-Methoden und leere Slots

Array-Methoden haben unterschiedliche Verhaltensweisen, wenn sie auf leere Slots in spärlichen Arrays treffen. Im Allgemeinen behandeln ältere Methoden (z. B. forEach) leere Slots anders als Indizes, die undefined enthalten.

Methoden, die leere Slots speziell behandeln, sind die folgenden: concat(), copyWithin(), every(), filter(), flat(), flatMap(), forEach(), indexOf(), lastIndexOf(), map(), reduce(), reduceRight(), reverse(), slice(), some(), sort() und splice(). Iterationsmethoden wie forEach besuchen leere Slots überhaupt nicht. Andere Methoden, wie concat, copyWithin usw., bewahren leere Slots beim Kopieren, sodass das Array am Ende immer noch spärlich ist.

const colors = ["red", "yellow", "blue"];
colors[5] = "purple";
colors.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});
// Output:
// 0: red
// 1: yellow
// 2: blue
// 5: purple

colors.reverse(); // ['purple', empty × 2, 'blue', 'yellow', 'red']

Neuere Methoden (z. B. keys) behandeln leere Slots nicht speziell und behandeln sie, als ob sie undefined enthalten. Methoden, die leere Slots mit undefined-Elementen gleichsetzen, sind die folgenden: entries(), fill(), find(), findIndex(), findLast(), findLastIndex(), includes(), join(), keys(), toLocaleString(), toReversed(), toSorted(), toSpliced(), values(), und with().

const colors = ["red", "yellow", "blue"];
colors[5] = "purple";
const iterator = colors.keys();
for (const key of iterator) {
  console.log(`${key}: ${colors[key]}`);
}
// Output
// 0: red
// 1: yellow
// 2: blue
// 3: undefined
// 4: undefined
// 5: purple

const newColors = colors.toReversed(); // ['purple', undefined, undefined, 'blue', 'yellow', 'red']

Kopierende Methoden und mutierende Methoden

Einige Methoden verändern nicht das vorhandene Array, auf dem die Methode aufgerufen wurde, sondern geben stattdessen ein neues Array zurück. Sie tun dies, indem sie zuerst ein neues Array erstellen und es dann mit Elementen füllen. Das Kopieren erfolgt immer _flach_ — die Methode kopiert nie etwas über das anfänglich erstellte Array hinaus. Elemente des Originalarrays werden wie folgt in das neue Array kopiert:

• Objekte: Die Objekt-Referenz wird in das neue Array kopiert. Sowohl das ursprüngliche als auch das neue Array verweisen auf dasselbe Objekt. Das bedeutet, wenn ein referenziertes Objekt geändert wird, sind die Änderungen sowohl im neuen als auch im ursprünglichen Array sichtbar.
• Primitive Typen wie Strings, Zahlen und Boolsche Werte (nicht String, Number, und Boolean Objekte): Ihre Werte werden in das neue Array kopiert.

Andere Methoden verändern das Array, auf dem die Methode aufgerufen wurde, wobei sich ihr Rückgabewert je nach Methode unterscheidet: manchmal eine Referenz auf dasselbe Array, manchmal die Länge des neuen Arrays.

Die folgenden Methoden erstellen neue Arrays, indem sie this.constructor[Symbol.species] aufrufen, um den zu verwendenden Konstruktor zu bestimmen: concat(), filter(), flat(), flatMap(), map(), slice(), und splice() (um das Array der entfernten Elemente zu erstellen, das zurückgegeben wird).

Die folgenden Methoden erstellen immer neue Arrays mit dem Array-Basiskonstruktor: toReversed(), toSorted(), toSpliced(), und with().

Die folgende Tabelle listet die Methoden auf, die das Originalarray verändern, und die entsprechende nicht-mutierende Alternative:

Ein einfacher Weg, eine mutierende Methode in eine nicht-mutierende Alternative zu ändern, ist, die Spread-Syntax oder slice() zu verwenden, um zuerst eine Kopie zu erstellen:

arr.copyWithin(0, 1, 2); // mutates arr
const arr2 = arr.slice().copyWithin(0, 1, 2); // does not mutate arr
const arr3 = [...arr].copyWithin(0, 1, 2); // does not mutate arr

Iterative Methoden

Viele Array-Methoden nehmen eine Rückruffunktion als Argument. Die Rückruffunktion wird der Reihe nach und höchstens einmal für jedes Element im Array aufgerufen, und der Rückgabewert der Rückruffunktion wird verwendet, um den Rückgabewert der Methode zu bestimmen. Sie alle teilen die gleiche Signatur:

method(callbackFn, thisArg)

Dabei nimmt callbackFn drei Argumente:

element

Das aktuelle Element, das im Array verarbeitet wird.

index

Der Index des aktuellen Elements, das im Array verarbeitet wird.

array

Das Array, auf dem die Methode aufgerufen wurde.

Was callbackFn zurückgeben soll, hängt von der aufgerufenen Array-Methode ab.

Das thisArg Argument (Standardwert ist undefined) wird als this-Wert beim Aufrufen von callbackFn verwendet. Der letztendlich von callbackFn beobachtbare this-Wert wird gemäß den üblichen Regeln bestimmt: Wenn callbackFn nicht strikt ist, werden primitive this-Werte in Objekte umgewandelt, und undefined/null wird durch globalThis ersetzt. Das thisArg Argument ist für jede mit einer Pfeilfunktion definierte callbackFn irrelevant, da Pfeilfunktionen keine eigene this-Bindung haben.

Das an callbackFn übergebene array-Argument ist am nützlichsten, wenn Sie während der Iteration einen anderen Index lesen möchten, da Sie nicht immer eine vorhandene Variable haben, die auf das aktuelle Array verweist. Sie sollten normalerweise das Array während der Iteration nicht verändern (siehe Veränderung des ursprünglichen Arrays in iterativen Methoden), aber Sie können dieses Argument auch dazu verwenden. Das array-Argument ist nicht das Array, das erstellt wird, im Fall von Methoden wie map(), filter(), und flatMap() — es gibt keine Möglichkeit, auf das erstellte Array von der Rückruffunktion aus zuzugreifen.

Alle iterativen Methoden sind kopierend und generisch, obwohl sie sich bei leeren Slots unterschiedlich verhalten.

Die folgenden Methoden sind iterativ: every(), filter(), find(), findIndex(), findLast(), findLastIndex(), flatMap(), forEach(), map(), und some().

Insbesondere every(), find(), findIndex(), findLast(), findLastIndex(), und some() rufen callbackFn nicht immer bei jedem Element auf — sie stoppen die Iteration, sobald der Rückgabewert bestimmt ist.

Die Methoden reduce() und reduceRight() nehmen auch eine Rückruffunktion an und führen sie höchstens einmal für jedes Element im Array aus, aber sie haben leicht unterschiedliche Signaturen im Vergleich zu typischen iterativen Methoden (zum Beispiel akzeptieren sie kein thisArg).

Die Methode sort() nimmt auch eine Rückruffunktion an, ist aber keine iterative Methode. Sie verändert das Array im Original, akzeptiert kein thisArg und kann die Rückruffunktion mehrfach für einen Index aufrufen.

Iterative Methoden durchlaufen das Array wie folgt (mit vielen technischen Details ausgeschlossen):

function method(callbackFn, thisArg) {
  const length = this.length;
  for (let i = 0; i < length; i++) {
    if (i in this) {
      const result = callbackFn.call(thisArg, this[i], i, this);
      // Do something with result; maybe return early
    }
  }
}

Beachten Sie Folgendes:

1. Nicht alle Methoden führen den i in this-Test durch. Die Methoden find, findIndex, findLast, und findLastIndex tun dies nicht, aber andere Methoden tun es.
2. Die length wird gespeichert, bevor die Schleife beginnt. Dies beeinflusst, wie Einsätze und Löschungen während der Iteration behandelt werden (siehe Veränderung des ursprünglichen Arrays in iterativen Methoden).
3. Die Methode merkt sich nicht den Inhalt des Arrays, sodass wenn ein Index während der Iteration geändert wird, der neue Wert möglicherweise beobachtet wird.
4. Der obige Code durchläuft das Array in aufsteigender Reihenfolge der Indizes. Einige Methoden durchlaufen in absteigender Reihenfolge der Indizes (for (let i = length - 1; i >= 0; i--)): reduceRight(), findLast(), und findLastIndex().
5. reduce und reduceRight haben leicht unterschiedliche Signaturen und beginnen nicht immer am ersten/letzten Element.

Generische Array-Methoden

Array-Methoden sind immer generisch — sie greifen nicht auf irgendwelche internen Daten des Array-Objekts zu. Sie greifen nur auf die Array-Elemente über die length-Eigenschaft und die indizierten Elemente zu. Das bedeutet, dass sie auch auf array-ähnlichen Objekten aufgerufen werden können.

const arrayLike = {
  0: "a",
  1: "b",
  length: 2,
};
console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'

Normalisierung der Länge-Eigenschaft

Die length-Eigenschaft wird in eine Ganzzahl umgewandelt und dann auf den Bereich zwischen 0 und 2⁵³ - 1 eingegrenzt. NaN wird zu 0, selbst wenn length nicht vorhanden ist oder undefined ist, verhält es sich, als hätte es den Wert 0.

Die Sprache vermeidet das Setzen von length auf eine unsichere Ganzzahl. Alle eingebauten Methoden werfen einen TypeError, wenn length auf eine Zahl größer als 2⁵³ - 1 gesetzt wird. Da jedoch die length-Eigenschaft von Arrays einen Fehler auslöst, wenn sie auf größer als 2³² - 1 gesetzt wird, wird die Grenze der sicheren Ganzzahl normalerweise nicht erreicht, es sei denn, die Methode wird auf ein Nicht-Array-Objekt aufgerufen.

Array.prototype.flat.call({}); // []

Einige Array-Methoden setzen die length-Eigenschaft des Array-Objekts. Sie setzen den Wert immer nach der Normalisierung, sodass length immer als Ganzzahl endet.

const a = { length: 0.7 };
Array.prototype.push.call(a);
console.log(a.length); // 0

Array-ähnliche Objekte

Der Begriff array-ähnliches Objekt bezieht sich auf jedes Objekt, das während des oben beschriebenen Konvertierungsprozesses der length-Eigenschaft keinen Fehler auslöst. In der Praxis wird bei einem solchen Objekt erwartet, dass es tatsächlich eine length-Eigenschaft hat und indizierte Elemente im Bereich von 0 bis length - 1. (Wenn es nicht alle Indizes hat, ist es funktional gleich einem spärlichen Array.) Jeder Ganzzahlindex kleiner als Null oder größer als length - 1 wird ignoriert, wenn eine Array-Methode auf einem array-ähnlichen Objekt arbeitet.

Viele DOM-Objekte sind array-ähnlich — beispielsweise NodeList und HTMLCollection. Das arguments-Objekt ist auch array-ähnlich. Sie können Array-Methoden darauf aufrufen, auch wenn sie diese Methoden selbst nicht haben.

function f() {
  console.log(Array.prototype.join.call(arguments, "+"));
}

f("a", "b"); // 'a+b'

Konstruktor

Array()

Erstellt ein neues Array-Objekt.

Statische Eigenschaften

Array[Symbol.species]

Gibt den Array-Konstruktor zurück.

Statische Methoden

Array.from()

Erstellt eine neue Array-Instanz aus einem iterierbaren oder array-ähnlichen Objekt.

Array.fromAsync()

Erstellt eine neue Array-Instanz aus einem asynchronen iterierbaren, iterierbaren oder array-ähnlichen Objekt.

Array.isArray()

Gibt true zurück, wenn das Argument ein Array ist, oder false andernfalls.

Array.of()

Erstellt eine neue Array-Instanz mit einer variablen Anzahl von Argumenten, unabhängig von Anzahl oder Typ der Argumente.

Instanz-Eigenschaften

Diese Eigenschaften sind auf Array.prototype definiert und werden von allen Array-Instanzen geteilt.

Array.prototype.constructor

Die Konstruktorfunktion, die das Instanzobjekt erstellt hat. Für Array-Instanzen ist der Anfangswert der Array-Konstruktor.

Array.prototype[Symbol.unscopables]

Enthält Eigenschaftsnamen, die in der ECMAScript-Norm vor der Version ES2015 nicht enthalten waren und die für Bindungszwecke der with-Anweisung ignoriert werden.

Diese Eigenschaften sind eigene Eigenschaften jeder Array-Instanz.

length

Gibt die Anzahl der Elemente in einem Array wieder.

Instanz-Methoden

Array.prototype.at()

Gibt das Array-Element an einem bestimmten Index zurück. Akzeptiert negative Ganzzahlen, die von dem letzten Element zurückzählen.

Array.prototype.concat()

Gibt ein neues Array zurück, das das aufrufende Array mit anderen Array(s) und/oder Wert(en) zusammenführt.

Array.prototype.copyWithin()

Kopiert eine Sequenz von Array-Elementen innerhalb eines Arrays.

Array.prototype.entries()

Gibt ein neues Array-Iterator Objekt zurück, das die Schlüssel/Wert-Paare für jeden Index in einem Array enthält.

Array.prototype.every()

Gibt false zurück, wenn es ein Element im Array findet, das die bereitgestellte Testfunktion nicht erfüllt. Ansonsten gibt es true zurück.

Array.prototype.fill()

Füllt alle Elemente eines Arrays von einem Startindex bis zu einem Endindex mit einem statischen Wert.

Array.prototype.filter()

Gibt ein neues Array zurück, das alle Elemente des aufrufenden Arrays enthält, für die die bereitgestellte Filterfunktion true zurückgibt.

Array.prototype.find()

Gibt den Wert des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt, oder undefined, wenn kein entsprechendes Element gefunden wird.

Array.prototype.findIndex()

Gibt den Index des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt, oder -1 wenn kein entsprechendes Element gefunden wurde.

Array.prototype.findLast()

Gibt den Wert des letzten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt, oder undefined, wenn kein entsprechendes Element gefunden wird.

Array.prototype.findLastIndex()

Gibt den Index des letzten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt, oder -1 wenn kein entsprechendes Element gefunden wurde.

Array.prototype.flat()

Gibt ein neues Array zurück, in dem alle Unter-Array-Elemente rekursiv bis zur angegebenen Tiefe in es selbst zusammengeführt wurden.

Array.prototype.flatMap()

Gibt ein neues Array zurück, das durch Anwenden einer gegebenen Rückruffunktion auf jedes Element des aufrufenden Arrays gebildet wird, und dann das Ergebnis um eine Ebene abflacht.

Array.prototype.forEach()

Ruft für jedes Element im aufrufenden Array eine Funktion auf.

Array.prototype.includes()

Bestimmt, ob das aufrufende Array einen Wert enthält und gibt true oder false zurück, je nachdem.

Array.prototype.indexOf()

Gibt den ersten (geringsten) Index zurück, an dem ein bestimmtes Element im aufrufenden Array gefunden werden kann.

Array.prototype.join()

Verbindet alle Elemente eines Arrays zu einem String.

Array.prototype.keys()

Gibt einen neuen Array-Iterator zurück, der die Schlüssel für jeden Index im aufrufenden Array enthält.

Array.prototype.lastIndexOf()

Gibt den letzten (größten) Index zurück, an dem ein bestimmtes Element im aufrufenden Array gefunden werden kann, oder -1 wenn keines gefunden wird.

Array.prototype.map()

Gibt ein neues Array zurück, das die Ergebnisse des Aufrufs einer Funktion auf jedes Element im aufrufenden Array enthält.

Array.prototype.pop()

Entfernt das letzte Element aus einem Array und gibt dieses Element zurück.

Array.prototype.push()

Fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue length des Arrays zurück.

Array.prototype.reduce()

Führt eine vom Benutzer bereitgestellte „Reducer“-Rückruffunktion auf jedes Element des Arrays aus (von links nach rechts), um es auf einen einzelnen Wert zu reduzieren.

Array.prototype.reduceRight()

Führt eine vom Benutzer bereitgestellte „Reducer“-Rückruffunktion auf jedes Element des Arrays aus (von rechts nach links), um es auf einen einzelnen Wert zu reduzieren.

Array.prototype.reverse()

Kehrt die Reihenfolge der Elemente eines Arrays in place um. (Das Erste wird das Letzte, das Letzte wird das Erste.)

Array.prototype.shift()

Entfernt das erste Element aus einem Array und gibt dieses Element zurück.

Array.prototype.slice()

Extrahiert einen Abschnitt des aufrufenden Arrays und gibt ein neues Array zurück.

Array.prototype.some()

Gibt true zurück, wenn es ein Element im Array findet, das die bereitgestellte Testfunktion erfüllt. Ansonsten gibt es false zurück.

Array.prototype.sort()

Sortiert die Elemente eines Arrays in place und gibt das Array zurück.

Array.prototype.splice()

Fügt Elemente zu einem Array hinzu und/oder entfernt Elemente daraus.

Array.prototype.toLocaleString()

Gibt einen lokalisierten String zurück, der das aufrufende Array und seine Elemente darstellt. Überschreibt die Object.prototype.toLocaleString()-Methode.

Array.prototype.toReversed()

Gibt ein neues Array mit den Elementen in umgekehrter Reihenfolge zurück, ohne das Originalarray zu verändern.

Array.prototype.toSorted()

Gibt ein neues Array mit den Elementen in aufsteigender Reihenfolge zurück, ohne das Originalarray zu verändern.

Array.prototype.toSpliced()

Gibt ein neues Array zurück, aus dem einige Elemente an einem bestimmten Index entfernt und/oder ersetzt wurden, ohne das Originalarray zu verändern.

Array.prototype.toString()

Gibt einen String zurück, der das aufrufende Array und seine Elemente darstellt. Überschreibt die Object.prototype.toString()-Methode.

Array.prototype.unshift()

Fügt ein oder mehrere Elemente an den Anfang eines Arrays hinzu und gibt die neue length des Arrays zurück.

Array.prototype.values()

Gibt ein neues Array-Iterator Objekt zurück, das die Werte für jeden Index im Array enthält.

Array.prototype.with()

Gibt ein neues Array zurück, bei dem das Element an einem bestimmten Index durch den gegebenen Wert ersetzt wird, ohne das Originalarray zu verändern.

Array.prototype[Symbol.iterator]()

Ein Alias für die values()-Methode standardmäßig.

Beispiele

In diesem Abschnitt finden Sie einige Beispiele für gängige Array-Operationen in JavaScript.

Ein Array erstellen

Dieses Beispiel zeigt drei Möglichkeiten, ein neues Array zu erstellen: zuerst mit der Array-Literal-Notation, dann mit dem Array()-Konstruktor und schließlich mit String.prototype.split(), um das Array aus einem String zu erstellen.

// 'fruits' array created using array literal notation.
const fruits = ["Apple", "Banana"];
console.log(fruits.length);
// 2

// 'fruits2' array created using the Array() constructor.
const fruits2 = new Array("Apple", "Banana");
console.log(fruits2.length);
// 2

// 'fruits3' array created using String.prototype.split().
const fruits3 = "Apple, Banana".split(", ");
console.log(fruits3.length);
// 2

Einen String aus einem Array erstellen

Dieses Beispiel verwendet die join()-Methode, um einen String aus dem fruits-Array zu erstellen.

const fruits = ["Apple", "Banana"];
const fruitsString = fruits.join(", ");
console.log(fruitsString);
// "Apple, Banana"

Zugriff auf ein Array-Element über seinen Index

Dieses Beispiel zeigt, wie Sie auf Elemente im fruits-Array zugreifen können, indem Sie die Indexnummer ihrer Position im Array angeben.

const fruits = ["Apple", "Banana"];

// The index of an array's first element is always 0.
fruits[0]; // Apple

// The index of an array's second element is always 1.
fruits[1]; // Banana

// The index of an array's last element is always one
// less than the length of the array.
fruits[fruits.length - 1]; // Banana

// Using an index number larger than the array's length
// returns 'undefined'.
fruits[99]; // undefined

Den Index eines Elements in einem Array finden

Dieses Beispiel verwendet die indexOf()-Methode, um die Position (den Index) des Strings "Banana" im fruits-Array zu finden.

const fruits = ["Apple", "Banana"];
console.log(fruits.indexOf("Banana"));
// 1

Prüfen, ob ein Array ein bestimmtes Element enthält

Dieses Beispiel zeigt zwei Möglichkeiten, um zu prüfen, ob das fruits-Array "Banana" und "Cherry" enthält: zuerst mit der includes()-Methode und dann mit der indexOf()-Methode, um auf einen Indexwert zu testen, der nicht -1 ist.

const fruits = ["Apple", "Banana"];

fruits.includes("Banana"); // true
fruits.includes("Cherry"); // false

// If indexOf() doesn't return -1, the array contains the given item.
fruits.indexOf("Banana") !== -1; // true
fruits.indexOf("Cherry") !== -1; // false

Ein Element an ein Array anhängen

Dieses Beispiel verwendet die push()-Methode, um einen neuen String an das fruits-Array anzuhängen.

const fruits = ["Apple", "Banana"];
const newLength = fruits.push("Orange");
console.log(fruits);
// ["Apple", "Banana", "Orange"]
console.log(newLength);
// 3

Das letzte Element aus einem Array entfernen

Dieses Beispiel verwendet die pop()-Methode, um das letzte Element aus dem fruits-Array zu entfernen.

const fruits = ["Apple", "Banana", "Orange"];
const removedItem = fruits.pop();
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItem);
// Orange

Mehrere Elemente vom Ende eines Arrays entfernen

Dieses Beispiel verwendet die splice()-Methode, um die letzten 3 Elemente aus dem fruits-Array zu entfernen.

const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];
const start = -3;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItems);
// ["Strawberry", "Mango", "Cherry"]

Ein Array auf seine ersten N Elemente verkürzen

Dieses Beispiel verwendet die splice()-Methode, um das fruits-Array auf seine ersten 2 Elemente zu verkürzen.

const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];
const start = 2;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItems);
// ["Strawberry", "Mango", "Cherry"]

Das erste Element aus einem Array entfernen

Dieses Beispiel verwendet die shift()-Methode, um das erste Element aus dem fruits-Array zu entfernen.

const fruits = ["Apple", "Banana"];
const removedItem = fruits.shift();
console.log(fruits);
// ["Banana"]
console.log(removedItem);
// Apple

Mehrere Elemente vom Anfang eines Arrays entfernen

Dieses Beispiel verwendet die splice()-Methode, um die ersten 3 Elemente aus dem fruits-Array zu entfernen.

const fruits = ["Apple", "Strawberry", "Cherry", "Banana", "Mango"];
const start = 0;
const deleteCount = 3;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Banana", "Mango"]
console.log(removedItems);
// ["Apple", "Strawberry", "Cherry"]

Ein neues erstes Element zu einem Array hinzufügen

Dieses Beispiel verwendet die unshift()-Methode, um an Index 0 ein neues Element zum fruits-Array hinzuzufügen — und es damit zum neuen ersten Element im Array zu machen.

const fruits = ["Banana", "Mango"];
const newLength = fruits.unshift("Strawberry");
console.log(fruits);
// ["Strawberry", "Banana", "Mango"]
console.log(newLength);
// 3

Ein einzelnes Element durch seinen Index entfernen

Dieses Beispiel verwendet die splice()-Methode, um den String "Banana" aus dem fruits-Array zu entfernen — indem die Indexposition von "Banana" angegeben wird.

const fruits = ["Strawberry", "Banana", "Mango"];
const start = fruits.indexOf("Banana");
const deleteCount = 1;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Strawberry", "Mango"]
console.log(removedItems);
// ["Banana"]

Mehrere Elemente durch ihren Index entfernen

Dieses Beispiel verwendet die splice()-Methode, um die Strings "Banana" und "Strawberry" aus dem fruits-Array zu entfernen — indem die Indexposition von "Banana" angegeben wird, zusammen mit einer Anzahl der insgesamt zu entfernenden Elemente.

const fruits = ["Apple", "Banana", "Strawberry", "Mango"];
const start = 1;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Apple", "Mango"]
console.log(removedItems);
// ["Banana", "Strawberry"]

Mehrere Elemente in einem Array ersetzen

Dieses Beispiel verwendet die splice()-Methode, um die letzten 2 Elemente im fruits-Array durch neue Elemente zu ersetzen.

const fruits = ["Apple", "Banana", "Strawberry"];
const start = -2;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount, "Mango", "Cherry");
console.log(fruits);
// ["Apple", "Mango", "Cherry"]
console.log(removedItems);
// ["Banana", "Strawberry"]

Über ein Array iterieren

Dieses Beispiel verwendet eine for...of-Schleife, um über das fruits-Array zu iterieren und jedes Element in der Konsole zu protokollieren.

const fruits = ["Apple", "Mango", "Cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}
// Apple
// Mango
// Cherry

Aber for...of ist nur eine von vielen Möglichkeiten, über ein Array zu iterieren; für weitere Möglichkeiten siehe Schleifen und Iteration und die Dokumentation für die Methoden every(), filter(), flatMap(), map(), reduce(), und reduceRight() — und siehe das nächste Beispiel, das die Methode forEach() verwendet.

Eine Funktion auf jedes Element in einem Array aufrufen

Dieses Beispiel verwendet die forEach()-Methode, um eine Funktion auf jedes Element im fruits-Array aufzurufen; die Funktion bewirkt, dass jedes Element zusammen mit der Indexnummer des Elements in der Konsole protokolliert wird.

const fruits = ["Apple", "Mango", "Cherry"];
fruits.forEach((item, index, array) => {
  console.log(item, index);
});
// Apple 0
// Mango 1
// Cherry 2

Mehrere Arrays zusammenführen

Dieses Beispiel verwendet die concat()-Methode, um das fruits-Array mit einem moreFruits-Array zu kombinieren, um ein neues combinedFruits-Array zu erzeugen. Beachten Sie, dass fruits und moreFruits unverändert bleiben.

const fruits = ["Apple", "Banana", "Strawberry"];
const moreFruits = ["Mango", "Cherry"];
const combinedFruits = fruits.concat(moreFruits);
console.log(combinedFruits);
// ["Apple", "Banana", "Strawberry", "Mango", "Cherry"]

// The 'fruits' array remains unchanged.
console.log(fruits);
// ["Apple", "Banana", "Strawberry"]

// The 'moreFruits' array also remains unchanged.
console.log(moreFruits);
// ["Mango", "Cherry"]

Ein Array kopieren

Dieses Beispiel zeigt drei Möglichkeiten, ein neues Array aus dem bestehenden fruits-Array zu erstellen: zuerst durch Verwendung der Spread-Syntax, dann durch Verwendung der Methode from() und schließlich durch Verwendung der Methode slice().

const fruits = ["Strawberry", "Mango"];

// Create a copy using spread syntax.
const fruitsCopy = [...fruits];
// ["Strawberry", "Mango"]

// Create a copy using the from() method.
const fruitsCopy2 = Array.from(fruits);
// ["Strawberry", "Mango"]

// Create a copy using the slice() method.
const fruitsCopy3 = fruits.slice();
// ["Strawberry", "Mango"]

Alle eingebauten Array-Kopieroperationen (Spread-Syntax, Array.from(), Array.prototype.slice(), und Array.prototype.concat()) erstellen flache Kopien. Wenn Sie stattdessen eine tiefe Kopie eines Arrays wünschen, können Sie JSON.stringify() verwenden, um das Array in einen JSON-String zu konvertieren und dann JSON.parse() verwenden, um den String zurück in ein neues Array zu konvertieren, das völlig unabhängig vom ursprünglichen Array ist.

const fruitsDeepCopy = JSON.parse(JSON.stringify(fruits));

Sie können auch tiefe Kopien mit der Methode structuredClone() erstellen, die den Vorteil bietet, dass übertragbare Objekte in der Quelle in die neue Kopie übertragen werden können, anstatt nur geklont zu werden.

Letztendlich ist es wichtig zu verstehen, dass die Zuweisung eines bestehenden Arrays zu einer neuen Variablen keine Kopie des Arrays oder seiner Elemente erstellt. Stattdessen ist die neue Variable nur eine Referenz, oder ein Alias, für das ursprüngliche Array; das heißt, der Name des ursprünglichen Arrays und der neue Variablenname sind nur zwei Namen für dasselbe Objekt (und werden daher immer als streng gleichwertig bewertet). Daher, wenn Sie eine beliebige Änderung entweder am Wert des ursprünglichen Arrays oder am Wert der neuen Variablen vornehmen, wird die andere sich ebenfalls ändern:

const fruits = ["Strawberry", "Mango"];
const fruitsAlias = fruits;
// 'fruits' and 'fruitsAlias' are the same object, strictly equivalent.
fruits === fruitsAlias; // true
// Any changes to the 'fruits' array change 'fruitsAlias' too.
fruits.unshift("Apple", "Banana");
console.log(fruits);
// ['Apple', 'Banana', 'Strawberry', 'Mango']
console.log(fruitsAlias);
// ['Apple', 'Banana', 'Strawberry', 'Mango']

Ein zweidimensionales Array erstellen

Das folgende Beispiel erstellt ein Schachbrett als ein zweidimensionales Array von Strings. Der erste Zug wird gemacht, indem das 'p' in board[6][4] in board[4][4] kopiert wird. Die alte Position bei [6][4] wird leer gemacht.

const board = [
  ["R", "N", "B", "Q", "K", "B", "N", "R"],
  ["P", "P", "P", "P", "P", "P", "P", "P"],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  ["p", "p", "p", "p", "p", "p", "p", "p"],
  ["r", "n", "b", "q", "k", "b", "n", "r"],
];

console.log(`${board.join("\n")}\n\n`);

// Move King's Pawn forward 2
board[4][4] = board[6][4];
board[6][4] = " ";
console.log(board.join("\n"));

Hier ist die Ausgabe:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , ,p, , ,
 , , , , , , ,
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

Verwendung eines Arrays zur Tabellierung eines Satzes von Werten

const values = [];
for (let x = 0; x < 10; x++) {
  values.push([2 ** x, 2 * x ** 2]);
}
console.table(values);

Ergebnisse in:

// The first column is the index
0  1    0
1  2    2
2  4    8
3  8    18
4  16   32
5  32   50
6  64   72
7  128  98
8  256  128
9  512  162

Ein Array mit dem Ergebnis eines Matches erstellen

Das Ergebnis eines Matches zwischen einem RegExp und einem String kann ein JavaScript-Array erstellen, das Eigenschaften und Elemente hat, die Informationen über das Match bereitstellen. Ein solches Array wird von RegExp.prototype.exec() und String.prototype.match() zurückgegeben.

Zum Beispiel:

// Match one d followed by one or more b's followed by one d
// Remember matched b's and the following d
// Ignore case

const myRe = /d(b+)(d)/i;
const execResult = myRe.exec("cdbBdbsbz");

console.log(execResult.input); // 'cdbBdbsbz'
console.log(execResult.index); // 1
console.log(execResult); // [ "dbBd", "bB", "d" ]

Für weitere Informationen über das Ergebnis eines Matches, siehe die Seiten RegExp.prototype.exec() und String.prototype.match().

Veränderung des ursprünglichen Arrays in iterativen Methoden

Iterative Methoden verändern nicht das Array, auf dem sie aufgerufen werden, aber die als callbackFn bereitgestellte Funktion kann dies tun. Der wichtigste Grundsatz, den Sie sich merken sollten, ist, dass nur Indizes zwischen 0 und arrayLength - 1 besucht werden, wobei arrayLength die Länge des Arrays zu dem Zeitpunkt ist, zu dem die Array-Methode erstmals aufgerufen wurde, aber das Element, das an die Rückruffunktion übergeben wird, der Wert zum Zeitpunkt ist, an dem der Index besucht wird. Daher:

• callbackFn wird keine Elemente besuchen, die über die anfängliche Länge des Arrays hinaus hinzugefügt wurden, als der Aufruf der iterativen Methode begann.
• Änderungen an bereits besuchten Indizes führen nicht dazu, dass callbackFn erneut aufgerufen wird.
• Wenn ein bestehendes, noch nicht besuchtes Element des Arrays von callbackFn geändert wird, ist der an callbackFn übergebene Wert der Wert, der zum Zeitpunkt des Besuchs des Elements vorhanden ist. Entfernte Elemente werden nicht besucht.

Die folgenden Beispiele verwenden die forEach-Methode als Beispiel, aber andere Methoden, die Indizes in aufsteigender Reihenfolge besuchen, funktionieren auf die gleiche Weise. Wir werden zuerst eine Hilfsfunktion definieren:

function testSideEffect(effect) {
  const arr = ["e1", "e2", "e3", "e4"];
  arr.forEach((elem, index, arr) => {
    console.log(`array: [${arr.join(", ")}], index: ${index}, elem: ${elem}`);
    effect(arr, index);
  });
  console.log(`Final array: [${arr.join(", ")}]`);
}

Modifikation an noch nicht besuchten Indizes wird sichtbar sein, sobald der Index erreicht wird:

testSideEffect((arr, index) => {
  if (index + 1 < arr.length) arr[index + 1] += "*";
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2*, e3, e4], index: 1, elem: e2*
// array: [e1, e2*, e3*, e4], index: 2, elem: e3*
// array: [e1, e2*, e3*, e4*], index: 3, elem: e4*
// Final array: [e1, e2*, e3*, e4*]

Änderungen an bereits besuchten Indizes ändern das Iterationsverhalten nicht, obwohl das Array danach anders sein wird:

testSideEffect((arr, index) => {
  if (index > 0) arr[index - 1] += "*";
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4], index: 1, elem: e2
// array: [e1*, e2, e3, e4], index: 2, elem: e3
// array: [e1*, e2*, e3, e4], index: 3, elem: e4
// Final array: [e1*, e2*, e3*, e4]

Das Einfügen von n Elementen an nicht besuchten Indizes, die kleiner als die anfängliche Array-Länge sind, wird dazu führen, dass sie besucht werden. Die letzten n Elemente im ursprünglichen Array, die jetzt einen Index größer als die anfängliche Array-Länge haben, werden nicht besucht:

testSideEffect((arr, index) => {
  if (index === 1) arr.splice(2, 0, "new");
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4], index: 1, elem: e2
// array: [e1, e2, new, e3, e4], index: 2, elem: new
// array: [e1, e2, new, e3, e4], index: 3, elem: e3
// Final array: [e1, e2, new, e3, e4]
// e4 is not visited because it now has index 4

Das Einfügen von n Elementen mit einem Index größer als die anfängliche Array-Länge wird nicht dazu führen, dass sie besucht werden:

testSideEffect((arr) => arr.push("new"));
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4, new], index: 1, elem: e2
// array: [e1, e2, e3, e4, new, new], index: 2, elem: e3
// array: [e1, e2, e3, e4, new, new, new], index: 3, elem: e4
// Final array: [e1, e2, e3, e4, new, new, new, new]

Das Einfügen von n Elementen an bereits besuchten Indizes wird nicht dazu führen, dass sie besucht werden, aber es verschiebt die verbleibenden Elemente um n nach hinten, sodass der aktuelle Index und die n - 1 Elemente davor wieder besucht werden:

testSideEffect((arr, index) => arr.splice(index, 0, "new"));
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [new, e1, e2, e3, e4], index: 1, elem: e1
// array: [new, new, e1, e2, e3, e4], index: 2, elem: e1
// array: [new, new, new, e1, e2, e3, e4], index: 3, elem: e1
// Final array: [new, new, new, new, e1, e2, e3, e4]
// e1 keeps getting visited because it keeps getting shifted back

Das Löschen von n Elementen an nicht besuchten Indizes wird dazu führen, dass sie nicht mehr besucht werden. Da das Array geschrumpft ist, werden die letzten n Iterationen nicht vorhandene Indizes besuchen. Wenn die Methode nicht vorhandene Indizes ignoriert (siehe Array-Methoden und leere Slots), werden die letzten n Iterationen übersprungen; andernfalls erhalten sie undefined:

testSideEffect((arr, index) => {
  if (index === 1) arr.splice(2, 1);
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4], index: 1, elem: e2
// array: [e1, e2, e4], index: 2, elem: e4
// Final array: [e1, e2, e4]
// Does not visit index 3 because it's out-of-bounds

// Compare this with find(), which treats nonexistent indexes as undefined:
const arr2 = ["e1", "e2", "e3", "e4"];
arr2.find((elem, index, arr) => {
  console.log(`array: [${arr.join(", ")}], index: ${index}, elem: ${elem}`);
  if (index === 1) arr.splice(2, 1);
  return false;
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e1, e2, e3, e4], index: 1, elem: e2
// array: [e1, e2, e4], index: 2, elem: e4
// array: [e1, e2, e4], index: 3, elem: undefined

Das Löschen von n Elementen an bereits besuchten Indizes ändert nicht die Tatsache, dass sie besucht wurden, bevor sie gelöscht wurden. Da das Array geschrumpft ist, werden die nächsten n Elemente nach dem aktuellen Index übersprungen. Wenn die Methode nicht vorhandene Indizes ignoriert, werden die letzten n Iterationen übersprungen; andernfalls erhalten sie undefined:

testSideEffect((arr, index) => arr.splice(index, 1));
// array: [e1, e2, e3, e4], index: 0, elem: e1
// Does not visit e2 because e2 now has index 0, which has already been visited
// array: [e2, e3, e4], index: 1, elem: e3
// Does not visit e4 because e4 now has index 1, which has already been visited
// Final array: [e2, e4]
// Index 2 is out-of-bounds, so it's not visited

// Compare this with find(), which treats nonexistent indexes as undefined:
const arr2 = ["e1", "e2", "e3", "e4"];
arr2.find((elem, index, arr) => {
  console.log(`array: [${arr.join(", ")}], index: ${index}, elem: ${elem}`);
  arr.splice(index, 1);
  return false;
});
// array: [e1, e2, e3, e4], index: 0, elem: e1
// array: [e2, e3, e4], index: 1, elem: e3
// array: [e2, e4], index: 2, elem: undefined
// array: [e2, e4], index: 3, elem: undefined

Für Methoden, die in absteigender Reihenfolge der Indizes iterieren, führt das Einfügen dazu, dass Elemente übersprungen werden, und das Löschen dazu, dass Elemente mehrfach besucht werden. Passen Sie den obigen Code selbst an, um die Effekte zu sehen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Indizierte Sammlungen Leitfaden
• TypedArray
• ArrayBuffer