Array

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

• JavaScript-Arrays sind größenveränderbar 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 auf Array-Elemente nicht mit beliebigen Zeichenfolgen als Indizes zugegriffen werden, sondern sie müssen mit nicht-negativen ganzen Zahlen (oder ihrer jeweiligen Zeichenfolge) als Indizes angesprochen werden.
• JavaScript-Arrays sind nullbasiert: Das erste Element eines Arrays befindet sich bei Index 0, das zweite bei Index 1 und so weiter — das letzte Element befindet sich bei dem Wert der Length-Eigenschaft des Arrays minus 1.
• JavaScript-Array-Kopiervorgänge erstellen flache Kopien. (Alle standardmäßigen integrierten Kopiervorgänge mit beliebigen JavaScript-Objekten erstellen flache Kopien, anstatt tiefer Kopien).

Array-Objekte können keine beliebigen Zeichenfolgen als Elementindizes (wie in einem assoziativen Array) verwenden, sondern müssen nicht-negative Ganzzahlen (oder deren jeweilige Zeichenfolgenform) verwenden. Das Setzen oder der Zugriff über Nicht-Ganzzahlen setzen oder rufen kein Element aus der Array-Liste selbst ab, sondern setzen oder greifen auf eine Variable zu, die mit der Objekteigenschaften-Sammlung dieses Arrays verbunden ist. Die Objekteigenschaften des Arrays und die Liste der Array-Elemente sind getrennt, und die Durchlauf- und Änderungsoperationen können nicht auf diese benannten Eigenschaften angewendet werden.

Array-Elemente sind Objekteigenschaften in derselben Weise, wie toString eine Eigenschaft ist (um genau zu sein, ist jedoch toString() eine Methode). Wenn Sie jedoch versuchen, auf ein Element eines Arrays wie folgt zuzugreifen, wird ein Syntaxfehler ausgelöst, da der Eigenschaftsname ungültig 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 möglich, die Array-Indizes zu quotieren (z.B. years['2'] statt years[2]), obwohl dies normalerweise nicht erforderlich ist.

Die 2 in years[2] wird von der JavaScript-Engine durch eine implizite toString-Konvertierung in eine Zeichenfolge umgewandelt. Infolgedessen 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.

Die Length-Eigenschaft eines JavaScript-Arrays und numerische Eigenschaften sind miteinander 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 Aktualisierungen 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, wird die Engine die Length-Eigenschaft des Arrays entsprechend aktualisieren:

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, indem leere Plätze hinzugefügt 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 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 erläutert.

Array-Methoden verhalten sich unterschiedlich, wenn sie auf leere Slots in sparsely besetzten Arrays treffen. Im Allgemeinen behandeln ältere Methoden (z.B. forEach) leere Slots anders als Indizes, die undefined enthalten.

Methoden, die eine besondere Behandlung für leere Slots bieten, 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 am Ende das Array weiterhin sparsely besetzt bleibt.

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

Jüngere Methoden (z.B. keys) behandeln leere Slots nicht besonders und behandeln sie so, als ob sie undefined enthalten. Methoden, die leere Slots mit undefined-Elementen gleichstellen, 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']

Einige Methoden ändern nicht das bestehende Array, auf das die Methode angewendet wurde, sondern geben stattdessen ein neues Array zurück. Sie tun dies, indem sie zuerst ein neues Array konstruieren und es dann mit Elementen füllen. Das Kopieren erfolgt immer _oberflächlich_ — die Methode kopiert niemals etwas über das neu erstellte Array hinaus. Elemente des ursprünglichen Arrays werden wie folgt in das neue Array kopiert:

• Objekte: Die Objektreferenz wird in das neue Array kopiert. Sowohl das ursprüngliche als auch das neue Array verweisen auf dasselbe Objekt. Das heißt, wenn ein referenziertes Objekt modifiziert wird, sind die Änderungen sowohl im neuen als auch im ursprünglichen Array sichtbar.
• Primitive Typen wie Strings, Zahlen und Booleans (nicht String, Number, und Boolean Objekte): Ihre Werte werden in das neue Array kopiert.

Andere Methoden ändern das Array, auf das die Methode angewendet wurde; in diesem Fall unterscheidet sich ihr Rückgabewert je nach Methode: manchmal eine Referenz auf dasselbe Array, manchmal die Länge des neuen Arrays.

Die folgenden Methoden erstellen neue Arrays, indem sie auf this.constructor[Symbol.species] zugreifen, um den zu verwendenden Konstruktor zu bestimmen: concat(), filter(), flat(), flatMap(), map(), slice(), und splice() (zur Konstruktion des Arrays der zurückgegebenen entfernten Elemente).

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 ursprüngliche Array ändern, und die entsprechende nicht-ändernde Alternative:

Eine einfache Möglichkeit, eine Änderungsmethode in eine nicht-ändernde Alternative umzuwandeln, ist die Verwendung der Spread-Syntax oder slice() für eine frühzeitige Kopie:

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 Rückruffunktion als Argument. Die Rückruffunktion wird nacheinander 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 dieselbe Signatur:

method(callbackFn, thisArg)

Wo callbackFn drei Argumente nimmt:

element

Das aktuell im Array verarbeitete Element.

index

Der Index des derzeit im Array verarbeiteten Elements.

array

Das Array, auf dem die Methode aufgerufen wurde.

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

Das Argument thisArg (standardmäßig undefined) wird als this-Wert verwendet, wenn callbackFn aufgerufen wird. Der letztendlich von callbackFn beobachtbare this-Wert wird gemäß den üblichen Regeln bestimmt: Wenn callbackFn nicht strikt ist, sind primitive this-Werte in Objekte umschlossen, und undefined/null wird durch globalThis ersetzt. Das thisArg-Argument ist irrelevant für jede callbackFn, die mit einer Pfeilfunktion definiert wurde, da Pfeilfunktionen keinen eigenen this Binden haben.

Das Argument array, das callbackFn übergeben wird, ist am nützlichsten, wenn Sie während der Iteration auf einen anderen Index zugreifen möchten, da Sie möglicherweise nicht immer eine bestehende Variable haben, die auf das aktuelle Array verweist. Sie sollten das Array während der Iteration im Allgemeinen nicht mutieren (siehe Ändern 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 aufgebaut wird, im Falle von Methoden wie map(), filter(), und flatMap() — es gibt keine Möglichkeit, von der Rückruffunktion auf das aufzubauende Array zuzugreifen.

Alle iterativen Methoden 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 nicht immer callbackFn bei jedem Element auf — sie beenden die Iteration, sobald der Rückgabewert ermittelt wurde.

Die Methoden reduce() und reduceRight() nehmen ebenfalls eine Rückruffunktion an und führen sie höchstens einmal für jedes Element im Array aus, haben jedoch leicht unterschiedliche Signaturen als typische iterative Methoden (zum Beispiel akzeptieren sie nicht thisArg).

Die Methode sort() nimmt auch eine Rückruffunktion an, ist aber keine iterative Methode. Sie ändert das Array direkt vor Ort, akzeptiert kein thisArg und kann die Rückruffunktion mehrfach auf einem Index aufrufen.

Iterative Methoden durchlaufen das Array wie folgt (viele technische Details weggelassen):

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 aus. Die Methoden find, findIndex, findLast, und findLastIndex führen diesen Test nicht aus, aber andere Methoden tun dies.
2. Die length wird gespeichert, bevor die Schleife beginnt. Dies wirkt sich darauf aus, wie Einfügungen und Löschungen während der Iteration behandelt werden (siehe Ändern des ursprünglichen Arrays in iterativen Methoden).
3. Die Methode speichert nicht den Array-Inhalt, sodass, wenn ein Index während der Iteration verä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 beim ersten/letzten Element.

Array-Methoden sind immer generisch — sie greifen auf keine internen 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 auf array-ähnliche Objekte angewendet 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 begrenzt. NaN wird 0, sodass auch dann, wenn length nicht vorhanden oder undefined ist, es so behandelt wird, als hätte es den Wert 0.

Die Sprache vermeidet es, length auf eine unsichere Ganzzahl zu setzen. Alle eingebauten Methoden werden einen TypeError auslösen, 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 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 während des oben beschriebenen length-Konvertierungsprozesses keinen Fehler auslöst. In der Praxis wird erwartet, dass ein solches Objekt 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 äquivalent zu einem sparsely besetzten Array.) Jeder ganzzahlige Index, der kleiner als null oder größer als length - 1 ist, 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 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, oder false sonst.

Array.of()

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

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 vor der ES2015-Version nicht im ECMAScript-Standard enthalten waren und für die with-Anweisungsbindung ignoriert werden.

Diese Eigenschaften sind Eigen-Eigenschaften jeder Array-Instanz.

length

Gibt die Anzahl der Elemente in einem Array wieder.

Array.prototype.at()

Gibt das Array-Element an dem angegebenen Index zurück. Akzeptiert negative Ganzzahlen, die vom 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) verbunden ist.

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

Array.prototype.flat()

Gibt ein neues Array zurück, das alle Unter-Array-Elemente bis zur angegebenen Tiefe rekursiv darin kombiniert.

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 das Ergebnis dann 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 entsprechend zurück.

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 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 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 Invokation 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 benutzerdefinierte "Reducer"-Rückruffunktion auf jedem Element des Arrays aus (von links nach rechts), um es auf einen einzelnen Wert zu reduzieren.

Array.prototype.reduceRight()

Führt eine benutzerdefinierte "Reducer"-Rückruffunktion auf jedem 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 mindestens ein Element im aufrufenden Array die bereitgestellte Testfunktion erfüllt.

Array.prototype.sort()

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

Array.prototype.splice()

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

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 Original-Array zu modifizieren.

Array.prototype.toSorted()

Gibt ein neues Array mit den Elementen in aufsteigender Reihenfolge sortiert zurück, ohne das Original-Array zu modifizieren.

Array.prototype.toSpliced()

Gibt ein neues Array mit einigen Elementen zurück, die an einem bestimmten Index entfernt und/oder ersetzt wurden, ohne das Original-Array zu modifizieren.

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 der Vorderseite 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 angegebenen Index durch den angegebenen Wert ersetzt wurde, ohne das Original-Array zu modifizieren.

Array.prototype[Symbol.iterator]()

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

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

Dieses Beispiel zeigt drei Möglichkeiten, um ein neues Array zu erstellen: zuerst durch Verwendung der Array-Literal-Notation, dann durch den Array() Konstruktor, und schließlich durch die Verwendung von 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

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"

Dieses Beispiel zeigt, wie man auf Elemente im fruits-Array zugreifen kann, 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

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

Dieses Beispiel zeigt zwei Möglichkeiten, um zu überprüfen, ob das fruits-Array "Banana" und "Cherry" enthält: zuerst mit der includes()-Methode und dann mit der indexOf()-Methode, um nach einem 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 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

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 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 an Index 0 ein neues Element zum fruits-Array hinzuzufügen — es wird das neue erste Element im Array sein.

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

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

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

Dieses Beispiel verwendet die forEach()-Methode, um eine Funktion für jedes Element im fruits-Array aufzurufen; die Funktion bewirkt, dass jedes Element zusammen mit seiner Indexnummer auf die Konsole protokolliert 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 verbinden, 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"]

Dieses Beispiel zeigt drei Möglichkeiten, um ein neues Array aus dem bestehenden fruits-Array zu erstellen: zuerst durch Verwendung der Spread-Syntax, dann durch Verwendung der from()-Methode und dann durch die Verwendung 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-Kopiervorgänge (Spread-Syntax, Array.from(), Array.prototype.slice(), und Array.prototype.concat()) erstellen flache Kopien. Wenn Sie stattdessen ein tiefes Kopieren eines Arrays wünschen, können Sie JSON.stringify() verwenden, um das Array in einen JSON-String zu konvertieren, und dann JSON.parse(), um den String zurück in ein neues Array zu konvertieren, das vollständig unabhängig vom ursprünglichen Array ist.

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

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

Schließlich ist es wichtig, zu verstehen, dass das Zuweisen 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 genau dasselbe Objekt (und werden daher immer als streng äquivalent ausgewertet). Daher, wenn Sie irgendwelche Änderungen entweder am Wert des ursprünglichen Arrays oder am Wert der neuen Variablen vornehmen, wird sich auch der andere ä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']

Das Folgende erstellt ein Schachbrett als ein zweidimensionales Array von Zeichenfolgen. Der erste Zug wird gemacht, indem das 'p' in board[6][4] auf 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 Matches zwischen einem RegExp und einem String kann ein JavaScript-Array erstellen, das Eigenschaften und Elemente hat, die Informationen über das Match liefern. 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().

Iterative Methoden ändern nicht das Array, auf dem sie aufgerufen werden, aber die als callbackFn bereitgestellte Funktion kann es. Das Hauptprinzip, das man sich merken sollte, ist, dass nur Indizes zwischen 0 und arrayLength - 1 besucht werden, wobei arrayLength die Länge des Array zum Zeitpunkt ist, als die Array-Methode zuerst aufgerufen wurde, aber das an die Rückruffunktion übergebene Element ist der Wert zu dem Zeitpunkt, an dem der Index besucht wird. Daher:

• callbackFn wird keine Elemente besuchen, die über die anfängliche Länge des Arrays hinaus hinzugefügt werden, wenn der Aufruf der iterativen Methode beginnt.
• Änderungen an bereits besuchten Indizes führen nicht dazu, dass callbackFn erneut auf ihnen ausgeführt wird.
• Wenn ein bestehendes, noch nicht besuchtes Element des Arrays von callbackFn geändert wird, wird der Wert, der an callbackFn übergeben wird, der Wert zum Zeitpunkt dieses Besuchs sein. 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(", ")}]`);
}

Änderungen an noch nicht besuchten Indizes werden sichtbar, 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 nicht das Iterationsverhalten, 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]

Die Einfügung von n Elementen auf noch nicht besuchten Indizes, die kleiner sind als die anfängliche Array-Länge, führt dazu, dass sie besucht werden. Die letzten n Elemente im ursprünglichen Array, die nun einen Index haben, der größer ist als die anfängliche Array-Länge, 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

Die Einfügung von n Elementen mit einem Index größer als die anfängliche Array-Länge führt nicht dazu, 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]

Die Einfügung von n Elementen in bereits besuchte Indizes führt nicht dazu, dass sie besucht werden, aber es verschiebt verbleibende 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 noch nicht besuchten Indizes wird dazu führen, dass sie nicht mehr besucht werden. Da das Array geschrumpft ist, werden die letzten n Iterationen Out-of-Bounds-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 nichts daran, dass sie besucht wurden, bevor sie gelöscht werden. 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 mehrfach besucht werden. Passen Sie den obigen Code selbst an, um die Auswirkungen zu sehen.

• Indizierte Sammlungen Leitfaden
• TypedArray
• ArrayBuffer