Array

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

• JavaScript-Arrays sind skalierbar und können eine Mischung verschiedener Datentypen enthalten. (Wenn diese Eigenschaften unerwünscht sind, verwenden Sie stattdessen typisierte Arrays.)
• JavaScript-Arrays sind keine assoziativen Arrays, daher können Array-Elemente nicht mit beliebigen Zeichenketten als Indizes zugegriffen werden, sondern müssen mit nicht-negativen Ganzzahlen (oder deren jeweilige Zeichenkettenform) zugegriffen werden.
• JavaScript-Arrays sind nullbasiert: Das erste Element eines Arrays ist bei Index 0, das zweite bei Index 1 usw. — und das letzte Element hat den Wert der length-Eigenschaft des Arrays minus 1.
• JavaScript Array-Kopieroperationen erstellen flache Kopien. (Alle standardmäßigen eingebauten Kopieroperationen für alle JavaScript-Objekte erstellen flache Kopien, statt tiefe Kopien).

Array-Objekte können keine beliebigen Zeichenketten als Elementindizes verwenden (wie in einem assoziativen Array), sondern müssen nicht-negative Ganzzahlen (oder deren jeweilige Zeichenkettenform) verwenden. Das Setzen oder Zugreifen ü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, so wie toString eine Eigenschaft ist (um genau zu sein, ist toString() eine Methode). Dennoch führt der folgende Versuch, auf ein Element eines Arrays zuzugreifen, zu einem Syntaxfehler, da der Eigenschaftsname ungültig ist:

arr.0; // a syntax error

Die JavaScript-Syntax erfordert, dass Eigenschaften, die mit einer Ziffer beginnen, mit der Klammernotation statt mit der Punktnotation angesprochen 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 vom JavaScript-Interpreter durch eine implizite toString-Konvertierung in eine Zeichenkette umgewandelt. Dadurch würden '2' und '02' auf zwei verschiedene Slots 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 willkürliche Zeichenkette, die bei der Array-Iteration nicht angesprochen wird.

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

Mehrere der eingebauten 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 auch zu Updates der length-Eigenschaft eines 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 der Interpreter 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-Eigenschaft erweitert das Array durch Hinzufügen leerer Slots, 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

Eine Verringerung 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 zur length-Eigenschaft weiter erläutert.

Array-Methoden haben unterschiedliche Verhaltensweisen bei leeren Slots in sparsely besetzten Arrays. Allgemein behandeln ältere Methoden (z.B. forEach) leere Slots anders als Indizes, die undefined enthalten.

Methoden, die eine spezielle Behandlung für leere Slots haben, sind unter anderem: 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 so, als würden 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() und values().

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

Einige Methoden mutieren das vorhandene Array nicht, an dem sie aufgerufen wurden, sondern geben stattdessen ein neues Array zurück. Sie tun dies, indem sie zuerst ein neues Array konstruieren und es dann mit Elementen befüllen. Die Kopie erfolgt immer _flach_ — die Methode kopiert niemals etwas über das initial erstellte Array hinaus. Elemente der Original-Arrays werden in das neue Array wie folgt kopiert:

• Objekte: Die Objekt-Referenz wird in das neue Array kopiert. Sowohl das Original- als auch das neue Array verweisen auf dasselbe Objekt. Das heißt, wenn ein referenziertes Objekt modifiziert wird, sind die Änderungen in beiden Arrays sichtbar.
• Primitive Typen wie Zeichenketten, Zahlen und Booleans (nicht String, Number, und Boolean Objekte): ihre Werte werden in das neue Array kopiert.

Andere Methoden mutieren das Array, in dem die Methode aufgerufen wurde, wobei ihr Rückgabewert je nach Methode manchmal eine Referenz auf dasselbe Array, manchmal die Länge des neuen Arrays ist.

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 entfernter Elemente zu konstruieren, das zurückgegeben wird).

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

Die folgende Tabelle listet die Methoden auf, die das Original-Array mutieren, und die entsprechenden nicht-mutierenden Alternativen:

Eine einfache Möglichkeit, eine mutierende Methode in eine nicht-mutierende Alternative umzuwandeln, besteht darin, zuerst eine Kopie mit der Spread-Syntax oder slice() 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

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

method(callbackFn, thisArg)

Wobei callbackFn drei Argumente verwendet:

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 erwartet zurückzugeben, hängt von der aufgerufenen Array-Methode ab.

Das thisArg-Argument (Standardwert ist undefined) wird als this-Wert verwendet, wenn callbackFn aufgerufen wird. Der schließlich 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 bei einem callbackFn, das mit einer Pfeilfunktion definiert wurde, irrelevant, da Pfeilfunktionen keine eigene this Bindung haben.

Das array-Argument, das an callbackFn übergeben wird, ist sehr nützlich, wenn Sie während der Iteration einen anderen Index lesen möchten, da Sie möglicherweise nicht immer eine vorhandene Variable haben, die auf das aktuelle Array verweist. Sie sollten das Array während der Iteration im Allgemeinen nicht mutieren (siehe Mutation des ursprünglichen Arrays in iterativen Methoden), aber Sie können dieses Argument auch dafür 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 Array zuzugreifen, das aus der Callback-Funktion erstellt wird.

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 beenden die Iteration, sobald der Rückgabewert bestimmt ist.

Die reduce() und reduceRight() Methoden nehmen auch eine Callback-Funktion und führen sie höchstens einmal für jedes Element im Array aus, haben jedoch leicht andere Signaturen als typische iterative Methoden (zum Beispiel akzeptieren sie kein thisArg).

Die sort() Methode nimmt auch eine Callback-Funktion, ist jedoch keine iterative Methode. Es mutiert das Array an Ort und Stelle, akzeptiert kein thisArg und kann den Callback mehrmals für einen Index aufrufen.

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

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 dies.
2. Die length wird vor Beginn der Schleife gespeichert. Dies beeinflusst, wie Einfügungen und Löschungen während der Iteration behandelt werden (siehe Mutation des ursprünglichen Arrays in iterativen Methoden).
3. Die Methode speichert den Inhalt des Arrays nicht, sodass jede Änderung eines Indexes während der Iteration dazu führen kann, dass der neue Wert beobachtet wird.
4. Der oben gezeigte Code durchläuft das Array in aufsteigender Reihenfolge der Indizes. Einige Methoden iterieren 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 beim ersten/letzten Element.

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

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 auf den Bereich zwischen 0 und 2⁵³ - 1 geklammert. NaN wird zu 0, sodass es sich verhält, als hätte es den Wert 0, selbst wenn length nicht vorhanden oder undefined ist.

Die Sprache vermeidet es, length auf eine unsichere Ganzzahl zu setzen. Alle eingebauten Methoden werfen einen TypeError-Fehler, 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 sichere Ganzzahlgrenze in der Regel 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 ein beliebiges Objekt, das während des length-Konvertierungsprozesses, der oben beschrieben wurde, keinen Fehler wirft. In der Praxis wird erwartet, dass ein solches Objekt tatsächlich über eine length-Eigenschaft verfügt und in den Bereich 0 bis length - 1 indizierte Elemente hat. (Wenn es nicht alle Indizes hat, ist es funktional äquivalent zu einem spärlich besetzten Array.) Jeder ganzzahlige Index unter null oder größer als length - 1 wird ignoriert, wenn eine Array-Methode auf einem array-ähnlichen Objekt ausgeführt wird.

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

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

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

Array()

Erstellt ein neues Array-Objekt.

Array[Symbol.species]

Gibt den Array-Konstruktor zurück.

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, andernfalls false.

Array.of()

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

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

Array.prototype.constructor

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

Array.prototype[Symbol.unscopables]

Enthält Eigenschaftsnamen, die nicht im ECMAScript-Standard vor der ES2015-Version enthalten waren und für with-Anweisungsbindungen ignoriert werden.

Diese Eigenschaften sind einzelne Eigenschaften jeder Array-Instanz.

length

Spiegelt die Anzahl der Elemente in einem Array wider.

Array.prototype.at()

Gibt das Array-Element am gegebenen Index zurück. Akzeptiert negative Ganzzahlen, die vom letzten Element aus zählen.

Array.prototype.concat()

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

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 true zurück, wenn jedes Element im aufrufenden Array die Testfunktion erfüllt.

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 geeignetes 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 geeignetes 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 geeignetes 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 geeignetes Element gefunden wurde.

Array.prototype.flat()

Gibt ein neues Array zurück, bei dem alle Unter-Array-Elemente bis zur angegebenen Tiefe rekursiv in das Array eingefügt sind.

Array.prototype.flatMap()

Gibt ein neues Array zurück, das durch Anwenden einer gegebenen Callback-Funktion auf jedes Element des aufrufenden Arrays gebildet wird und das Ergebnis um eine Stufe abflacht.

Array.prototype.forEach()

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

Array.prototype.includes()

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

Array.prototype.indexOf()

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

Array.prototype.join()

Verbindet alle Elemente eines Arrays zu einer Zeichenkette.

Array.prototype.keys()

Gibt ein neues Array-Iterator-Objekt zurück, das 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 gegebenes 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 der Ausführung einer Funktion auf jedem 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 "Reduzierer"-Callback-Funktion bei jedem Element des Arrays aus (von links nach rechts), um es auf einen einzigen Wert zu reduzieren.

Array.prototype.reduceRight()

Führt eine vom Benutzer bereitgestellte "Reduzierer"-Callback-Funktion bei jedem Element des Arrays aus (von rechts nach links), um es auf einen einzigen Wert zu reduzieren.

Array.prototype.reverse()

Kehrt die Reihenfolge der Elemente eines Arrays vor Ort 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 mindestens ein Element im aufrufenden Array die bereitgestellte Testfunktion erfüllt.

Array.prototype.sort()

Sortiert die Elemente eines Arrays an Ort und Stelle und gibt das Array zurück.

Array.prototype.splice()

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

Array.prototype.toLocaleString()

Gibt eine lokalisierte Zeichenkette zurück, die das aufrufende Array und seine Elemente darstellt. Überschreibt die Object.prototype.toLocaleString() Methode.

Array.prototype.toReversed()

Gibt ein neues Array zurück, bei dem die Reihenfolge der Elemente umgekehrt ist, ohne das ursprüngliche Array zu verändern.

Array.prototype.toSorted()

Gibt ein neues Array zurück, bei dem die Elemente in aufsteigender Reihenfolge sortiert sind, ohne das ursprüngliche Array zu verändern.

Array.prototype.toSpliced()

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

Array.prototype.toString()

Gibt eine Zeichenkette zurück, die das aufrufende Array und seine Elemente darstellt. Überschreibt die Object.prototype.toString() Methode.

Array.prototype.unshift()

Fügt ein oder mehrere Elemente am 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 am gegebenen Index durch den gegebenen Wert ersetzt wurde, ohne das ursprüngliche Array zu verändern.

Array.prototype[Symbol.iterator]()

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

Dieser Abschnitt bietet einige Beispiele für gängige Array-Operationen in JavaScript.

Dieses Beispiel zeigt drei Wege, ein neues Array zu erstellen: zuerst mit Array-Literal-Notation, dann mit dem Array()-Konstruktor, und schließlich mithilfe von String.prototype.split(), um das Array aus einer Zeichenkette 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

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

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

Dieses Beispiel zeigt, wie man auf Elemente im fruits-Array zugreift, indem man die Indexnummer ihrer Position im Array angibt.

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

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

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

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

Dieses Beispiel verwendet die push()-Methode, um eine neue Zeichenkette zum fruits-Array hinzuzufügen.

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

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

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

Dieses Beispiel verwendet die splice()-Methode, um das fruits-Array auf nur seine ersten 2 Elemente zu kü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"]

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

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

Dieses Beispiel verwendet die unshift()-Methode, um bei Index 0 ein neues Element zum fruits-Array hinzuzufügen — wodurch es zum neuen ersten Element im Array wird.

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

Dieses Beispiel verwendet die splice()-Methode, um die Zeichenkette "Banana" aus dem fruits-Array zu entfernen — indem der Index der Position 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"]

Dieses Beispiel verwendet die splice()-Methode, um die Zeichenketten "Banana" und "Strawberry" aus dem fruits-Array zu entfernen — indem der Index der Position von "Banana" zusammen mit einer Gesamtanzahl der 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"]

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

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

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, um über ein Array zu iterieren; für weitere Möglichkeiten siehe Schleifen und Iterationen und die Dokumentation zu den Methoden every(), filter(), flatMap(), map(), reduce() und reduceRight() — sowie das nächste Beispiel, das die forEach()-Methode verwendet.

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

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

Dieses Beispiel verwendet die concat()-Methode, um das fruits-Array mit einem moreFruits-Array zu einem neuen combinedFruits-Array zusammenzuführen. 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"]

Dieses Beispiel zeigt drei Wege, ein neues Array aus dem bestehenden fruits-Array zu erstellen: zuerst mit der Spread-Syntax, dann mit der from()-Methode und schließlich 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-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 eine JSON-Zeichenkette zu konvertieren und dann JSON.parse() verwenden, um die Zeichenkette in ein neues Array zu konvertieren, das vollkommen unabhängig vom ursprünglichen Array ist.

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

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

Abschließend ist es wichtig zu verstehen, dass das Zuweisen eines vorhandenen 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 äquivalent ausgewertet). Daher, wenn Sie irgendwelche Änderungen an dem Wert des ursprünglichen Arrays oder dem Wert der neuen Variablen vornehmen, wird die andere ebenfalls geä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']

Das Folgende erstellt ein Schachbrett als ein zweidimensionales Array von Zeichenketten. Der erste Zug wird gemacht, indem das 'p' in board[6][4] nach 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

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

Das Ergebnis eines Abgleichs zwischen einer RegExp und einer Zeichenkette 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() zurückgegeben.

Beispielsweise:

// 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 Abgleichs siehe die Seiten zu RegExp.prototype.exec() und String.prototype.match().

Iterative Methoden mutieren nicht das Array, auf dem sie aufgerufen werden, aber die Funktion, die als callbackFn bereitgestellt wird, kann dies. Das wichtigste Prinzip, das zu beachten ist, ist, dass nur Indizes zwischen 0 und arrayLength - 1 besucht werden, wobei arrayLength die Länge des Arrays ist, zum Zeitpunkt, zu dem die Array-Methode zuerst aufgerufen wurde, aber das Element, das an den Callback übergeben wird, der Wert zur Zeit ist, wenn der Index besucht wird. Daher:

• callbackFn wird keine hinzugefügten Elemente besuchen, die über die ursprüngliche Länge des Arrays hinausgehen, wenn der Aufruf der iterativen Methode begonnen hat.
• Änderungen an bereits besuchten Indizes veranlassen nicht, dass callbackFn erneut bei ihnen aufgerufen wird.
• Wenn ein bestehendes, noch nicht besuchtes Element des Arrays von callbackFn geändert wird, ist der Wert, der an callbackFn übergeben wird, der Wert zu dem Zeitpunkt, an dem das Element besucht wird. Entfernte Elemente werden nicht besucht.

Die folgenden Beispiele verwenden die forEach-Methode als Beispiel, aber andere Methoden, die Indizes in aufsteigender Reihenfolge besuchen, arbeiten auf die gleiche Weise. Wir werden zunächst 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(", ")}]`);
}

Modifikationen an 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 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 ursprü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 ursprüngliche Länge des Arrays 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, der größer als die ursprüngliche Länge des Arrays ist, 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 diese besucht werden, aber es verschiebt die verbleibenden Elemente um n zurück, 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 Löschen von n Elementen an nicht besuchten Indizes führt dazu, dass sie nicht mehr besucht werden. Da das Array geschrumpft ist, werden die letzten n Iterationen aus dem Array hinausliegende Indizes ansprechen. 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 bereits 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 von Elementen dazu, dass Elemente übersprungen werden, und das Löschen führt dazu, dass Elemente mehrere Male besucht werden. Passen Sie den obigen Code selbst an, um die Effekte zu sehen.

• Indexierte Sammlungen Leitfaden
• TypedArray
• ArrayBuffer