Array

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

• JavaScript-Arrays sind veränderbar und können eine Mischung aus verschiedenen Datentypen enthalten. (Wenn diese Eigenschaften unerwünscht sind, verwenden Sie stattdessen typisierte Arrays.)
• JavaScript-Arrays sind keine assoziativen Arrays, daher können Array-Elemente nicht mit beliebigen Zeichenfolgen als Index zugegriffen werden, sondern müssen mit nicht-negativen ganzen Zahlen (oder ihrer jeweiligen Zeichenform) als Index zugegriffen 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 hat den Wert der length-Eigenschaft des Arrays minus 1.
• JavaScript-Array-Kopieroperationen erzeugen flache Kopien. (Alle standardmäßigen eingebauten Kopieroperationen von irgendwelchen JavaScript-Objekten erzeugen flache Kopien, anstatt tiefe Kopien.)

Array-Objekte können keine beliebigen Zeichenfolgen als Elementindizes verwenden (wie in einem assoziativen Array), sondern müssen nicht-negative ganze Zahlen (oder deren Zeichenform) verwenden. Beim Setzen oder Zugreifen über Nicht-Ganzzahlen wird kein Element aus der Array-Liste selbst gesetzt oder abgerufen, sondern eine Variable in Bezug auf die Objekteigenschaftensammlung dieses Arrays gesetzt oder abgerufen. Die Objekteigenschaften des Arrays und die Liste der Array-Elemente sind getrennt, und die Durchlauf- und Mutationsoperationen des Arrays können nicht auf diese benannten Eigenschaften angewendet werden.

Array-Elemente sind in derselben Weise Objekteigenschaften wie toString eine Eigenschaft ist (um es genau zu sagen, toString() ist eine Methode). Dennoch löst der Versuch, auf ein Element eines Arrays wie folgt zuzugreifen, einen Syntaxfehler aus, da der Eigenschaftsname ungültig ist:

arr.0; // a syntax error

JavaScript-Syntax erfordert, dass Eigenschaften, die mit einer Ziffer beginnen, mit der Klammernotation anstelle der Punktnotation zugegriffen werden. Es ist auch möglich, 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 vom JavaScript-Interpreter durch eine implizite toString-Konvertierung in eine Zeichenfolge umgewandelt. Infolgedessen würden '2' und '02' auf zwei verschiedene Speicherplätze im years-Objekt verweisen, und das folgende Beispiel könnte true ergeben:

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

Nur years['2'] ist ein tatsächlicher Array-Index. years['02'] ist eine beliebige Zeichenfolge, die bei der Iteration über das Array nicht angesprochen wird.

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

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

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

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

Wenn eine Eigenschaft auf einem JavaScript-Array gesetzt wird, wenn die Eigenschaft ein gültiger Array-Index ist und dieser Index außerhalb 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 Erhöhen der length verlängert das Array, indem leere Plätze hinzugefügt werden, ohne dass neue Elemente erstellt werden — nicht einmal undefined.

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

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

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

Dies wird auf der Seite zur length-Eigenschaft näher erläutert.

Array-Methoden verhalten sich unterschiedlich, wenn sie auf leere Plätze in dünn besetzten Arrays stoßen. Im Allgemeinen behandeln ältere Methoden (z.B. forEach) leere Plätze anders als Indizes, die undefined enthalten.

Methoden, die leere Plätze besonders behandeln, sind unter anderem: concat(), copyWithin(), every(), filter(), flat(), flatMap(), forEach(), indexOf(), lastIndexOf(), map(), reduce(), reduceRight(), reverse(), slice(), some(), sort(), und splice(). Iterationsmethoden wie forEach durchlaufen leere Plätze überhaupt nicht. Andere Methoden wie concat, copyWithin usw. erhalten leere Plätze beim Kopieren, sodass das Array letztendlich weiterhin dünn besetzt 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 Plätze nicht speziell und behandeln sie, als ob sie undefined enthalten. Methoden, die leere Plätze mit undefined-Elementen verwechseln, sind unter anderem: 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 verändern nicht das existierende Array, auf dem die Methode aufgerufen 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. Die Kopie erfolgt immer _flach_ — die Methode kopiert niemals etwas über das ursprünglich erstellte Array hinaus. Elemente des ursprünglichen Arrays werden wie folgt in das neue Array kopiert:

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

Andere Methoden ändern das Array, auf dem die Methode aufgerufen wurde, wobei sich ihr Rückgabewert je nach Methode unterscheidet: manchmal ein Verweis auf dasselbe Array, manchmal die Länge 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 zurückgegebene Array der entfernten Elemente zu konstruieren).

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

Die folgende Tabelle listet die Methoden auf, die das Original-Array verändern, und die entsprechende nicht-verändernde Alternative:

Eine einfache Möglichkeit, eine verändernde Methode in eine nicht-verändernde Alternative umzuwandeln, besteht darin, die Spread-Syntax oder slice() zu verwenden, um zuerst eine Kopie zu erstellen:

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

Viele Array-Methoden akzeptieren eine Callback-Funktion als Argument. Die Callback-Funktion wird sequenziell 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 haben die gleiche Signatur:

method(callbackFn, thisArg)

Wo callbackFn drei Argumente annimmt:

element

Das aktuelle Element, das im Array verarbeitet wird.

index

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

array

Das Array, auf dem die Methode aufgerufen wurde.

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

Das thisArg-Argument (standardmäßig undefined) wird als this-Wert verwendet, wenn callbackFn aufgerufen wird. Der letztlich von callbackFn beobachtbare this-Wert wird gemäß den üblichen Regeln bestimmt: Wenn callbackFn nicht-strikt ist, werden primitive this-Werte in Objekte verpackt, und undefined/null wird durch globalThis ersetzt. Das thisArg-Argument ist irrelevant für jedes callbackFn, das mit einer Pfeilfunktion definiert ist, da Pfeilfunktionen kein eigenes this Binding haben.

Das an callbackFn übergebene array-Argument ist am nützlichsten, wenn Sie während der Iteration einen anderen Index lesen möchten, da Sie möglicherweise nicht immer eine vorhandene Variable haben, die auf das aktuelle Array verweist. Im Allgemeinen sollten Sie das Array während der Iteration nicht ändern (siehe Änderung des ursprünglichen Arrays in iterativen Methoden), aber Sie können dieses Argument auch verwenden, um es zu tun. 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 erstelle Array aus der Callback-Funktion zuzugreifen.

Alle iterativen Methoden sind kopierend und generisch, obwohl sie sich unterschiedlich bei leeren Plätzen 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 auf jedem Element auf — sie stoppen die Iteration, sobald der Rückgabewert bestimmt ist.

Die Methoden reduce() und reduceRight() akzeptieren ebenfalls eine Callback-Funktion und führen sie höchstens einmal pro Element im Array aus, jedoch haben sie leicht unterschiedliche Signaturen im Vergleich zu typischen iterativen Methoden (zum Beispiel akzeptieren sie nicht thisArg).

Die Methode sort() nimmt ebenfalls eine Callback-Funktion an, ist jedoch keine iterative Methode. Sie ändert das Array in-place, akzeptiert kein thisArg und kann die Callback-Funktion mehrmals auf einem Index aufrufen.

Iterative Methoden durchlaufen das Array so (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 die folgenden Punkte:

1. Nicht alle Methoden führen den i in this-Test durch. Die Methoden find, findIndex, findLast und findLastIndex tun das nicht, aber andere Methoden schon.
2. Die length wird vor Beginn der Schleife gemerkt. Dies beeinflusst, wie Einfügungen und Löschungen während der Iteration gehandhabt werden (siehe Änderung des ursprünglichen Arrays in iterativen Methoden).
3. Die Methode merkt sich nicht den Inhalt des Arrays, sodass, wenn während der Iteration ein Index geändert wird, der neue Wert beobachtet werden kann.
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 nicht auf interne 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-ähnlichen Objekten aufgerufen werden können.

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

Normalisierung der Längen-Eigenschaft

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

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

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

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

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

Array-ähnliche Objekte

Der Begriff array-ähnliches Objekt bezieht sich auf jedes Objekt, das während des length-Konvertierungsprozesses oben nicht wirft. In der Praxis wird von einem solchen Objekt erwartet, dass es tatsächlich eine length-Eigenschaft hat und indizierte Elemente im Bereich von 0 bis length - 1 hat. (Wenn es nicht alle Indizes hat, wird es funktionell einem dünn besetzten Array entsprechen.) 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 ausgeführt wird.

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 nicht selbst 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, einem Iterierbaren oder einem array-ähnlichen Objekt.

Array.isArray()

Gibt true zurück, wenn das Argument ein Array ist, ansonsten 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 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 Version ES2015 nicht im ECMAScript-Standard enthalten waren und die für with-Anweisungen Zweckbindung ignoriert werden.

Diese Eigenschaften sind eigene Eigenschaften jeder Array-Instanz.

length

Reflektiert die Anzahl der Elemente in einem Array.

Array.prototype.at()

Gibt das Array-Element an dem angegebenen Index zurück. Akzeptiert negative Ganzzahlen, die von dem letzten Element rückwärts zählen.

Array.prototype.concat()

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

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 Test-Funktion 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 Test-Funktion erfüllt, oder undefined, wenn kein entsprechendes Element gefunden wird.

Array.prototype.findIndex()

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

Array.prototype.findLast()

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

Array.prototype.findLastIndex()

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

Array.prototype.flat()

Gibt ein neues Array zurück, in dem alle Unter-Array-Elemente rekursiv bis zur angegebenen Tiefe verkettet 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 dann das Ergebnis um eine Ebene flachlegt.

Array.prototype.forEach()

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

Array.prototype.includes()

Bestimmt, ob das aufrufende Array einen bestimmten 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 bestimmtes Element im aufrufenden Array gefunden werden kann.

Array.prototype.join()

Vereinigt 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 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 an das Ende eines Arrays hinzu und gibt die neue length des Arrays zurück.

Array.prototype.reduce()

Führt eine benutzerdefinierte "Reducer"-Callback-Funktion auf jedem Element des Arrays (von links nach rechts) aus, um sie auf einen einzigen Wert zu reduzieren.

Array.prototype.reduceRight()

Führt eine benutzerdefinierte "Reducer"-Callback-Funktion auf jedem Element des Arrays (von rechts nach links) aus, um sie auf einen einzigen Wert zu reduzieren.

Array.prototype.reverse()

Kehrt die Reihenfolge der Elemente eines Arrays in place um. (Erstes wird letztes, letztes wird erstes.)

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 Test-Funktion erfüllt.

Array.prototype.sort()

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

Array.prototype.splice()

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

Array.prototype.toLocaleString()

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

Array.prototype.toReversed()

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

Array.prototype.toSorted()

Gibt ein neues Array mit den aufsteigend sortierten Elementen zurück, ohne das ursprüngliche Array zu ändern.

Array.prototype.toSpliced()

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

Array.prototype.toString()

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

Array.prototype.unshift()

Fügt ein oder mehrere Elemente 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 angegebenen Wert ersetzt wird, ohne das ursprüngliche Array zu ändern.

Array.prototype[Symbol.iterator]()

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

Dieser Abschnitt bietet einige Beispiele für häufige Array-Operationen in JavaScript.

Dieses Beispiel zeigt drei Möglichkeiten, ein neues Array zu erstellen: zuerst mit der Array-Literal-Notation, dann mit dem Array()-Konstruktor, und schließlich unter 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 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

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 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 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 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 — es wird damit das neue erste Element im Array.

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

Dieses Beispiel verwendet die splice()-Methode, um die letzten 2 Elemente im fruits-Array mit neuen Elementen 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 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 jedes Array zu iterieren; für weitere Möglichkeiten siehe Schleifen und Iteration und sehen Sie die Dokumentation für die Methoden every(), filter(), flatMap(), map(), reduce(), und reduceRight() — und sehen Sie das nächste Beispiel, das die forEach()-Methode verwendet.

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

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 zu verbinden. 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, ein neues Array aus dem vorhandenen fruits-Array zu erstellen: zuerst durch Verwendung der Spread-Syntax, dann durch Verwendung der from()-Methode und dann durch 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-Kopieroperationen (Spread-Syntax, Array.from(), Array.prototype.slice() und Array.prototype.concat()) erstellen flache Kopien. Wenn Sie stattdessen eine tiefe Kopie eines Arrays möchten, können Sie JSON.stringify() verwenden, um das Array in einen JSON-String zu konvertieren, und dann JSON.parse(), um den String wieder 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 in die neue Kopie übertragen werden können, anstatt nur geklont.

Es ist schließlich 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 genau dasselbe Objekt (und werden somit immer als streng äquivalent betrachtet). 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 Beispiel 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"));

Das Ergebnis sieht folgendermaßen aus:

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 folgendes Ergebnis

// 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 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() 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 mehr Informationen über das Ergebnis eines Abgleichs, sehen Sie die Seiten zu RegExp.prototype.exec() und String.prototype.match().

Iterative Methoden verändern nicht das Array, auf dem sie aufgerufen werden, aber die als callbackFn bereitgestellte Funktion kann dies tun. Das Schlüsselprinzip, das Sie sich merken müssen, ist, dass nur Indizes zwischen 0 und arrayLength - 1 besucht werden, wobei arrayLength die Länge des Arrays ist, wenn die Array-Methode erstmals aufgerufen wurde, aber das Element, das an die Callback-Funktion übergeben wird, ist der Wert zu dem Zeitpunkt, zu dem der Index besucht wird. Daher:

• callbackFn wird keine Elemente besuchen, die über die ursprüngliche Länge des Arrays hinaus hinzugefügt werden, als der Aufruf der iterativen Methode begann.
• Änderungen an bereits besuchten Indizes führen nicht dazu, dass callbackFn erneut aufgerufen wird.
• Wenn ein vorhandenes, noch nicht besuchtes Element des Arrays von callbackFn geändert wird, wird sein Wert zu dem Zeitpunkt, zu dem dieses Element besucht wird, an callbackFn übergeben. 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 dieselbe 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(", ")}]`);
}

Änderungen an 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 das Iterationsverhalten nicht, obwohl das Array danach anders aussieht:

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 weniger 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 Array-Länge haben, werden nicht besucht:

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

Das Einfügen von n Elementen mit einem Index, der größer als die ursprüngliche Array-Länge 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 sie besucht werden, sondern es verschiebt die verbleibenden Elemente um n zurück, sodass der aktuelle Index und die n - 1 davor liegenden Elemente 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 wird dazu führen, dass sie nicht mehr besucht werden. Da das Array geschrumpft ist, werden die letzten n Iterationen nicht durchgeführte Indizes besuchen. Wenn die Methode nicht vorhandene Indizes ignoriert (siehe Array-Methoden und leere Plätze), werden die letzten n Iterationen übersprungen; andernfalls erhalten sie undefined:

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

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

Das Löschen von n Elementen an bereits besuchten Indizes ändert nicht die Tatsache, dass sie besucht wurden, bevor sie gelöscht wurden. Da das Array geschrumpft ist, werden die nächsten n Elemente nach dem aktuellen Index überschlagen. 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

Bei Methoden, die in absteigender Reihenfolge von Indizes iterieren, führt das Einfügen dazu, dass Elemente übersprungen werden, und das Löschen führt dazu, dass Elemente mehrmals besucht werden. Passen Sie den obigen Code selbst an, um die Auswirkungen zu sehen.

• Indizierte Sammlungen Leitfaden
• TypedArray
• ArrayBuffer