Array

Beschreibung

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

• JavaScript Arrays sind vernderbar und knnen eine Mischung aus verschiedenen Datentypen enthalten. (Falls diese Eigenschaften unerwnscht sind, verwenden Sie stattdessen Typed Arrays.)
• JavaScript Arrays sind keine assoziativen Arrays, daher knnen Array-Elemente nicht mit beliebigen Zeichenfolgen als Indizes angesprochen werden, sondern mssen mit nicht-negativen Ganzzahlen (oder deren stringfrmige Darstellung) als Indizes angesprochen werden.
• JavaScript Arrays sind nullbasiert: Das erste Element eines Arrays befindet sich an Index 0, das zweite an Index 1 und so weiter und das letzte Element befindet sich beim Wert der length-Eigenschaft des Arrays minus 1.
• JavaScript Array-Kopiervorgnge erstellen flache Kopien. (Alle standardmigen eingebauten Kopiervorgnge mit jedem JavaScript-Objekt erstellen flache Kopien, anstatt tiefe Kopien zu erstellen.)

Array-Indizes

Array Objekte knnen keine beliebigen Zeichenfolgen als Elementindizes verwenden (wie in einem assoziativen Array), sondern mssen nicht-negative Ganzzahlen (oder deren stringfrmige Darstellung) verwenden. Das Setzen oder der Zugriff ber Nicht-Integer wird kein Element aus der Array-Liste selbst setzen oder abrufen, sondern eine Variable, die mit der Objekteigenschaftensammlung dieses Arrays verbunden ist, setzen oder darauf zugreifen. Die Objekteigenschaften des Arrays und die Liste der Array-Elemente sind getrennt, und die Traversierungs- und nderungsoperationen des Arrays knnen nicht auf diese benannten Eigenschaften angewendet werden.

Array-Elemente sind Objekteigenschaften in derselben Weise, wie toString eine Eigenschaft ist (genauer gesagt ist toString() jedoch eine Methode). Trotzdem fhrt der Versuch, ein Element eines Arrays wie folgt zuzugreifen, zu einem Syntaxfehler, weil der Eigenschaftenname nicht gltig ist:

arr.0; // a syntax error

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

Die 2 in years[2] wird durch die JavaScript-Engine mittels einer impliziten toString Konvertierung in einen String umgewandelt. Dadurch wrden '2' und '02' zwei unterschiedliche Slots auf dem years Objekt reprsentieren, und das folgende Beispiel knnte true sein:

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

Nur years['2'] ist ein tatschlicher Array-Index. years['02'] ist eine willkrliche Zeichenfolgeigenschaft, die bei der Array-Iteration nicht bercksichtigt wird.

Beziehung zwischen length und numerischen Eigenschaften

Die length-Eigenschaft eines JavaScript-Arrays und numerische Eigenschaften sind miteinander verbunden.

Mehrere der eingebauten Array-Methoden (z. B. join(), slice(), indexOf() usw.) bercksichtigen den Wert der length-Eigenschaft eines Arrays, wenn sie aufgerufen werden.

Andere Methoden (z. B. push(), splice() usw.) fhren zu Aktualisierungen der length-Eigenschaft eines Arrays.

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

Wenn eine Eigenschaft an einem JavaScript-Array gesetzt wird, wobei die Eigenschaft ein gltiger Array-Index ist und dieser Index auerhalb der aktuellen Grenzen des Arrays liegt, wird die length-Eigenschaft des Arrays entsprechend aktualisiert:

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

Das Erhhen der length erweitert das Array, indem leere Slots hinzugefgt werden, ohne neue Elemente zu erstellen 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 lscht jedoch Elemente.

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

Dies wird auf der length-Seite weiter erklrt.

Array-Methoden und leere Slots

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

Methoden, die eine spezielle Behandlung fr leere Slots vorsehen, umfassen: 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 weiterhin sprlich 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, umfassen: 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']

Kopiermethoden und nderungsmethoden

Einige Methoden verndern nicht das bestehende Array, auf dem die Methode aufgerufen wurde, sondern geben ein neues Array zurck. Sie tun dies, indem sie zuerst ein neues Array konstruieren und dann mit Elementen fllen. Die Kopie erfolgt immer _flach_ die Methode kopiert nie etwas ber das ursprnglich erstellte Array hinaus. Elemente der Originalarrays werden wie folgt in das neue Array kopiert:

• Objekte: Die Objektreferenz wird in das neue Array kopiert. Sowohl das Original- als auch das neue Array verweisen auf dasselbe Objekt. Das heit, wenn ein referenziertes Objekt gendert wird, sind die nderungen in beiden, dem neuen und dem Originalarray, sichtbar.
• Primitive Typen wie Zeichenfolgen, Zahlen und Booleans (nicht String, Number und Boolean Objekte): deren Werte werden in das neue Array kopiert.

Andere Methoden verndern das Array, auf dem die Methode aufgerufen wurde, wobei sich der Rckgabewert je nach Methode unterscheidet: manchmal eine Referenz auf dasselbe Array, manchmal die Lnge des neuen Arrays.

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

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 verndern, und die entsprechende nicht-verndernde Alternative:

Eine einfache Mglichkeit, eine verndernde Methode in eine nicht-verndernde Alternative umzuwandeln, besteht darin, den 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

Iterativmethoden

Viele Array-Methoden nehmen eine Callback-Funktion als Argument. Die Callback-Funktion wird nacheinander aufgerufen, maximal einmal fr jedes Element im Array, und der Rckgabewert der Callback-Funktion wird verwendet, um den Rckgabewert der Methode zu bestimmen. Sie alle teilen die gleiche Signatur:

method(callbackFn, thisArg)

Wobei callbackFn drei Argumente nimmt:

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 zurckgeben soll, hngt von der aufgerufenen Array-Methode ab.

Das thisArg Argument (standardmig undefined) wird als this Wert verwendet, wenn callbackFn aufgerufen wird. Der letztlich von callbackFn beobachtbare this Wert wird entsprechend den blichen Regeln bestimmt: Wenn callbackFn non-strict ist, werden primitive this Werte in Objekte gewrappt und undefined/null wird durch globalThis ersetzt. Das thisArg Argument ist irrelevant fr jede callbackFn, die mit einer Arrow-Funktion definiert ist, da Arrow-Funktionen kein eigenes this binding haben.

Das an callbackFn bergebene array Argument ist sehr ntzlich, wenn Sie whrend der Iteration einen anderen Index lesen mchten, da Sie mglicherweise nicht immer eine vorhandene Variable haben, die auf das aktuelle Array verweist. Im Allgemeinen sollten Sie das Array whrend der Iteration nicht ndern (siehe ndern des ursprnglichen Arrays in Iterationsmethoden), aber Sie knnen dieses Argument auch dafr verwenden. Das array Argument ist nicht das Array, das erstellt wird, im Falle von Methoden wie map(), filter() und flatMap() Es gibt keine Mglichkeit, das erstellte Array von der Callback-Funktion aus zuzugreifen.

Alle Iterationsmethoden sind kopierend und generisch, obwohl sie sich mit 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 beenden die Iteration, sobald der Rckgabewert festgelegt ist.

Die Methoden reduce() und reduceRight() erfordern auch eine Callback-Funktion und fhren sie maximal einmal fr jedes Element im Array aus, aber sie haben leicht unterschiedliche Signaturen als typische Iterationsmethoden (zum Beispiel akzeptieren sie kein thisArg).

Die Methode sort() nimmt ebenfalls eine Callback-Funktion an, ist aber keine Iterationsmethode. Sie verndert das Array an Ort und Stelle, akzeptiert kein thisArg und kann den Callback mehrfach bei einem Index aufrufen.

Iterationsmethoden iterieren das Array wie folgt (mit vielen weggelassenen technischen Details):

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 machen den i in this Test. Die Methoden find, findIndex, findLast und findLastIndex tun dies nicht, andere Methoden schon.
2. Die length ist gespeichert, bevor die Schleife beginnt. Dies beeinflusst, wie Einfgungen und Lschungen whrend der Iteration gehandhabt werden (siehe ndern des ursprnglichen Arrays in Iterationsmethoden).
3. Die Methode speichert die Array-Inhalte nicht, sodass wenn ein Index whrend der Iteration gendert wird, der neue Wert mglicherweise beobachtet wird.
4. Der oben gezeigte Code iteriert das Array in aufsteigender Reihenfolge des Indexes. Einige Methoden iterieren in absteigender Reihenfolge des Indexes (for (let i = length - 1; i >= 0; i--)): reduceRight(), findLast() und findLastIndex().
5. reduce und reduceRight haben leicht abweichende Signaturen und starten nicht immer beim ersten/letzten Element.

Generische Array-Methoden

Array-Methoden sind immer generisch Sie greifen nicht auf interne Daten des Array-Objekts zu. Sie greifen nur auf die Array-Elemente ber die length Eigenschaft und die indizierten Elemente zu. Dies bedeutet, dass sie auch bei array-hnlichen Objekten aufgerufen werden knnen.

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

Normalisierung der length Eigenschaft

Die length Eigenschaft wird in eine Ganzzahl umgewandelt und dann in den Bereich zwischen 0 und 253 - 1 eingegrenzt. NaN wird zu 0, sodass selbst wenn length nicht vorhanden oder undefined ist, es so funktioniert, als ob es den Wert 0 htte.

Die Sprache vermeidet das Setzen von length auf eine unsichere Ganzzahl. Alle eingebauten Methoden werfen einen TypeError, wenn length auf eine Zahl grer als 253 - 1 gesetzt wird. Da jedoch die length Eigenschaft von Arrays einen Fehler auslst, wenn sie auf grer als 232 - 1 gesetzt wird, wird die sichere Ganzzahlschwelle normalerweise nicht erreicht, es sei denn, die Methode wird auf einem 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 whrend des length Konvertierungsprozesses wie oben beschrieben keinen Fehler wirft. In der Praxis wird von einem solchen Objekt erwartet, dass es tatschlich eine length Eigenschaft hat und indizierte Elemente im Bereich 0 bis length - 1. (Wenn es nicht alle Indizes hat, ist es funktional quivalent zu einem sparsamen Array.) Jeder ganzzahlige Index kleiner als null oder grer als length - 1 wird ignoriert, wenn eine Array-Methode auf einem Array-hnlichen Objekt arbeitet.

Viele DOM-Objekte sind Array-hnlich Zum Beispiel NodeList und HTMLCollection. Das arguments Objekt ist ebenfalls Array-hnlich. Sie knnen 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 zurck.

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 zurck, wenn das Argument ein Array ist, andernfalls false.

Array.of()

Erstellt eine neue Array Instanz mit einer variablen Anzahl von Argumenten, unabhngig von Anzahl oder Typ der Argumente.

Instanzeigenschaften

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

Array.prototype.constructor

Die Konstruktorfunktion, die das Instanzobjekt erstellt hat. Bei Array Instanzen ist der Anfangswert der Array Konstruktor.

Array.prototype[Symbol.unscopables]

Enthlt Eigenschaftsnamen, die vor der ES2015-Version nicht in den ECMAScript-Standard aufgenommen wurden und die fr with Anweisungsbindung ignoriert werden.

Diese Eigenschaften sind eigene Eigenschaften jeder Array Instanz.

length

Gibt die Anzahl der Elemente in einem Array wieder.

Instanzmethoden

Array.prototype.at()

Gibt das Array-Element am angegebenen Index zurck. Akzeptiert negative Ganzzahlen, die vom letzten Element zurckzhlen.

Array.prototype.concat()

Gibt ein neues Array zurck, das das aufrufende Array mit anderen Array(s) und/oder Wert(en) kombiniert.

Array.prototype.copyWithin()

Kopiert eine Sequenz von Array-Elementen innerhalb eines Arrays.

Array.prototype.entries()

Gibt ein neues Array-Iterator Objekt zurck, das die Schlssel/Wert-Paare fr jeden Index in einem Array enthlt.

Array.prototype.every()

Gibt false zurck, wenn es ein Element im Array findet, das nicht die bereitgestellte Testfunktion erfllt. Andernfalls gibt es true zurck.

Array.prototype.fill()

Fllt alle Elemente eines Arrays von einem Startindex bis zu einem Endindex mit einem statischen Wert.

Array.prototype.filter()

Gibt ein neues Array zurck, das alle Elemente des aufrufenden Arrays enthlt, fr die die bereitgestellte Filterfunktion true zurckgibt.

Array.prototype.find()

Gibt den Wert des ersten Elements im Array zurck, das die bereitgestellte Testfunktion erfllt, oder undefined, wenn kein geeignetes Element gefunden wird.

Array.prototype.findIndex()

Gibt den Index des ersten Elements im Array zurck, das die bereitgestellte Testfunktion erfllt, oder -1, wenn kein geeignetes Element gefunden wurde.

Array.prototype.findLast()

Gibt den Wert des letzten Elements im Array zurck, das die bereitgestellte Testfunktion erfllt, oder undefined, wenn kein geeignetes Element gefunden wird.

Array.prototype.findLastIndex()

Gibt den Index des letzten Elements im Array zurck, das die bereitgestellte Testfunktion erfllt, oder -1, wenn kein geeignetes Element gefunden wurde.

Array.prototype.flat()

Gibt ein neues Array mit allen Unter-Array-Elementen zurck, die rekursiv bis zur angegebenen Tiefe zusammengefgt sind.

Array.prototype.flatMap()

Gibt ein neues Array zurck, das durch Anwenden einer gegebenen Callback-Funktion auf jedes Element des aufrufenden Arrays gebildet wird, und dann das Ergebnis um eine Ebene aufspaltet.

Array.prototype.forEach()

Ruft eine Funktion fr jedes Element im aufrufenden Array auf.

Array.prototype.includes()

Bestimmt, ob das aufrufende Array einen Wert enthlt, und gibt entsprechend true oder false zurck.

Array.prototype.indexOf()

Gibt den ersten (kleinsten) Index zurck, an dem ein gegebenes Element im anrufenden Array gefunden werden kann.

Array.prototype.join()

Gibt einen neuen String zurck, der die Verkettung aller Elemente in diesem Array darstellt, getrennt durch Kommas oder einen angegebenen Trennzeichen-String.

Array.prototype.keys()

Gibt einen neuen Array-Iterator zurck, der die Schlssel fr jeden Index im anrufenden Array enthlt.

Array.prototype.lastIndexOf()

Gibt den letzten (grten) Index zurck, an dem ein gegebenes Element im anrufenden Array gefunden werden kann, oder -1, wenn keines gefunden wird.

Array.prototype.map()

Gibt ein neues Array zurck, das die Ergebnisse des Aufrufs einer Funktion auf jedes Element im anrufenden Array enthlt.

Array.prototype.pop()

Entfernt das letzte Element aus einem Array und gibt dieses Element zurck.

Array.prototype.push()

Fgt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue length des Arrays zurck.

Array.prototype.reduce()

Fhrt eine vom Benutzer bereitgestellte "Reducer"-Callback-Funktion fr jedes Element des Arrays (von links nach rechts) aus, um es auf einen einzigen Wert zu reduzieren.

Array.prototype.reduceRight()

Fhrt eine vom Benutzer bereitgestellte "Reducer"-Callback-Funktion fr jedes Element des Arrays (von rechts nach links) aus, um es auf einen einzigen Wert zu reduzieren.

Array.prototype.reverse()

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

Array.prototype.shift()

Entfernt das erste Element aus einem Array und gibt dieses Element zurck.

Array.prototype.slice()

Extrahiert einen Abschnitt des aufrufenden Arrays und gibt ein neues Array zurck.

Array.prototype.some()

Gibt true zurck, wenn es ein Element im Array findet, das die bereitgestellte Testfunktion erfllt. Andernfalls gibt es false zurck.

Array.prototype.sort()

Sortiert die Elemente eines Arrays an Ort und Stelle und gibt das Array zurck.

Array.prototype.splice()

Fgt Elemente zu einem Array hinzu und/oder entfernt sie.

Array.prototype.toLocaleString()

Gibt einen lokalisierten String zurck, 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 zurck, ohne das Originalarray zu ndern.

Array.prototype.toSorted()

Gibt ein neues Array zurck, bei dem die Elemente in aufsteigender Reihenfolge sortiert sind, ohne das Originalarray zu ndern.

Array.prototype.toSpliced()

Gibt ein neues Array mit einigen entfernten und/oder an einem gegebenen Index ersetzten Elementen zurck, ohne das Originalarray zu verndern.

Array.prototype.toString()

Gibt einen String zurck, der das aufrufende Array und seine Elemente darstellt. berschreibt die Object.prototype.toString() Methode.

Array.prototype.unshift()

Fgt ein oder mehrere Elemente am Anfang eines Arrays hinzu und gibt die neue length des Arrays zurck.

Array.prototype.values()

Gibt ein neues Array-Iterator Objekt zurck, das die Werte fr jeden Index im Array enthlt.

Array.prototype.with()

Gibt ein neues Array mit dem Element am gegebenen Index, ersetzt durch den gegebenen Wert, ohne das Originalarray zu verndern.

Array.prototype[Symbol.iterator]()

Ist standardmig ein Alias fr die values() Methode.

Beispiele

Dieser Abschnitt bietet einige Beispiele fr hufige Array-Operationen in JavaScript.

Ein Array erstellen

Dieses Beispiel zeigt drei Mglichkeiten, ein neues Array zu erstellen: zuerst mit der Array-Literal-Notation, dann mit dem Array() Konstruktor und schlielich 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

Erstellen eines Strings aus einem Array

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 dessen Index

Dieses Beispiel zeigt, wie auf Elemente im fruits Array zugegriffen wird, indem die Indexnummer ihrer Position im Array angegeben wird.

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 (Index) des Strings "Banana" im fruits Array zu finden.

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

berprfen, ob ein Array ein bestimmtes Element enthlt

Dieses Beispiel zeigt zwei Mglichkeiten, um zu berprfen, ob das fruits Array "Banana" und "Cherry" enthlt: 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 anhngen

Dieses Beispiel verwendet die push() Methode, um einen neuen String an das fruits Array anzuhngen.

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 nur seine ersten N Elemente reduzieren

Dieses Beispiel verwendet die splice() Methode, um das fruits Array auf nur seine ersten 2 Elemente zu krzen.

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 hinzufgen

Dieses Beispiel verwendet die unshift() Methode, um an Index 0 ein neues Element zum fruits Array hinzuzufgen es wird so zum neuen ersten Element im Array.

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

Ein einzelnes Element per 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 per 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" zusammen mit einer Anzahl der insgesamt zu entfernenden Elemente angegeben wird.

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 Mglichkeiten, ber ein Array zu iterieren; fr weitere Mglichkeiten siehe Schleifen und Iteration und die Dokumentation fr die Methoden every(), filter(), flatMap(), map(), reduce() und reduceRight() und siehe das nchste 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 verursacht, dass jedes Element, zusammen mit dessen Indexnummer, 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 zusammenfhren

Dieses Beispiel verwendet die concat() Methode, um das fruits Array mit einem moreFruits Array zu einem neuen combinedFruits Array zusammenzufhren. Beachten Sie, dass fruits und moreFruits unverndert 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 Wege, um ein neues Array aus dem bestehenden fruits Array zu erstellen: zuerst mit dem Spread-Syntax, dann mit der from() Methode und dann mit der slice() Methode.

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-Kopiervorgnge (Spread-Syntax, Array.from(), Array.prototype.slice() und Array.prototype.concat()) erstellen flache Kopien. Wenn Sie stattdessen eine tiefe Kopie eines Arrays mchten, knnen Sie JSON.stringify() verwenden, um das Array in einen JSON-String zu konvertieren, und dann JSON.parse(), um den String zurck in ein neues Array zu konvertieren, das vollstndig unabhngig vom Original-Array ist.

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

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

Schlielich ist es wichtig zu verstehen, dass das Zuweisen eines bestehenden Arrays zu einer neuen Variable weder eine Kopie des Arrays noch seiner Elemente erstellt. Stattdessen ist die neue Variable nur eine Referenz oder ein Alias fr das Original-Array; das heit, der Name des Original-Arrays und der neue Variablenname sind nur zwei Namen fr dasselbe Objekt (und werden daher immer als streng quivalent bewertet). Daher fhren alle nderungen an entweder dem Wert des Original-Arrays oder dem Wert der neuen Variablen dazu, dass sich auch das andere ndert:

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 erstellt ein Schachbrett als zweidimensionales Array von Zeichenfolgen. Der erste Zug wird gemacht, indem der 'p' in board[6][4] nach board[4][4] kopiert wird. Die alte Position an [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

Ein Array verwenden, um eine Menge von Werten tabellarisch darzustellen

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

Ergibt

// 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 aus dem Ergebnis eines Abgleichs erstellen

Das Ergebnis eines Abgleichs zwischen einem RegExp und einem String kann ein JavaScript-Array erstellen, das Eigenschaften und Elemente hat, die Informationen ber den Abgleich liefern. Ein solches Array wird von RegExp.prototype.exec() und String.prototype.match() zurckgegeben.

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" ]

Fr weitere Informationen ber das Ergebnis eines Abgleichs siehe die Seiten zu RegExp.prototype.exec() und String.prototype.match().

ndern des ursprnglichen Arrays in Iterationsmethoden

Iterationsmethoden verndern das Array, auf dem sie aufgerufen werden, nicht, aber die Funktion, die als callbackFn bereitgestellt wird, kann dies tun. Der entscheidende Grundsatz dabei ist, dass nur Indizes zwischen 0 und arrayLength - 1 besucht werden, wobei arrayLength die Lnge des Arrays zur Zeit des ersten Aufrufs der Array-Methode ist, aber das an den Callback bergebene Element ist der Wert zum Zeitpunkt, an dem der Index besucht wird. Daher:

• callbackFn wird keine Elemente besuchen, die ber die ursprngliche Lnge des Arrays hinaus hinzugefgt werden, wenn der Aufruf der Iterationsmethode begonnen wird.
• nderungen an bereits besuchten Indizes fhren nicht dazu, dass callbackFn erneut fr sie aufgerufen wird.
• Wenn ein bestehendes, noch nicht besuchtes Element des Arrays von callbackFn gendert wird, ist sein Wert beim Aufruf von callbackFn der Wert zu dem Zeitpunkt, an dem das Element besucht wird. Entfernte Elemente werden nicht besucht.

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

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 zu Indizes, die noch nicht besucht wurden, werden sichtbar, sobald der Index erreicht ist:

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*]

Modifikationen zu bereits besuchten Indizes ndern das Iterationsverhalten nicht, obwohl das Array spter 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 Einfgen von n Elementen an noch nicht besuchte Indizes, die kleiner als die ursprngliche Array-Lnge sind, macht, dass sie besucht werden. Die letzten n Elemente im ursprnglichen Array, die jetzt einen Index grer als die ursprngliche Array-Lnge 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 Einfgen von n Elementen mit einem Index grer als die ursprngliche Array-Lnge wird nicht dazu fhren, 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 Einfgen von n Elementen an bereits besuchte Indizes fhrt nicht dazu, dass sie besucht werden, aber es verschiebt die verbleibenden Elemente um n zurck, sodass der aktuelle Index und die n - 1 Elemente davor erneut 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 Lschen von n Elementen an noch nicht besuchten Indizes fhrt dazu, dass sie nicht mehr besucht werden. Da das Array geschrumpft ist, werden die letzten n Iterationen auf nicht mehr vorhandene Indizes stoen. 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 Lschen von n Elementen an bereits besuchten Indizes ndert nicht die Tatsache, dass sie besucht wurden, bevor sie gelscht wurden. Da das Array geschrumpft ist, werden die nchsten 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

Fr Methoden, die in absteigender Reihenfolge des Index iterieren, fhrt das Einfgen dazu, dass Elemente bersprungen werden, und das Lschen dazu, dass Elemente mehrfach besucht werden. Passen Sie den obigen Code selbst an, um die Effekte zu sehen.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Indizierte Sammlungen Leitfaden
• TypedArray
• ArrayBuffer