In JavaScript sind Arrays keinePrimitiven, sondernArray-Objekte mit den folgenden Kerneigenschaften:

• JavaScript-Arrays sind anpassbar undkönnen eine Mischung verschiedenerDatentypen enthalten. (Wenn diese Eigenschaften unerwünscht sind, verwenden Sie stattdessentypisierte Arrays.)
• JavaScript-Arrays sind keine assoziativen Arrays, daher können Array-Elemente nicht mit beliebigen Zeichenfolgen als Indizes angesprochen werden, sondern müssen mit nicht-negativen Ganzzahlen (oder ihrer entsprechenden Zeichenform) als Indizes angesprochen werden.
• JavaScript-Arrays sindnullbasiert: Das erste Element eines Arrays ist bei Index0, das zweite bei Index1 usw. — und das letzte Element hat den Wert derlength-Eigenschaft des Arrays minus1.
• JavaScriptArray-Kopieroperationen erstellenflache Kopien. (Alle Standard-Kopieroperationen mitbeliebigen JavaScript-Objekten erstellen flache Kopien, anstatttiefe Kopien).

Array-Objekte können keine beliebigen Zeichenfolgen als Elementindizes verwenden (wie bei einemassoziativen Array), sondern müssen nicht-negative Ganzzahlen (oder ihre entsprechende Zeichenform) verwenden. Einstellen oder Zugreifen mit Nicht-Ganzzahlen setzt oder ruft kein Element aus der Array-Liste selbst ab, sondern setzt oder greift auf eine Variable zu, die mit derObjekteigenschaftssammlung dieses Arrays verbunden ist. Die Objekteigenschaften des Arrays und die Liste der Array-Elemente sind getrennt, und dieDurchlauf- und Mutationsoperationen des Arrays können nicht auf diese benannten Eigenschaften angewendet werden.

Array-Elemente sind Objekteigenschaften auf die gleiche Weise, wietoString eine Eigenschaft ist (um genau zu sein,toString() ist eine Methode). Es wirft jedoch einen Syntaxfehler, wenn versucht wird, ein Element eines Arrays wie folgt zuzugreifen, da der Eigenschaftsname nicht gültig ist:

arr.0; // a syntax error

Die JavaScript-Syntax erfordert, dass Eigenschaften, die mit einer Ziffer beginnen, mithilfe derKlammernotation anstelle derPunktnotation abgerufen werden. Es ist auch möglich, die Array-Indizes zu zitieren (z.B.years['2'] anstelle vonyears[2]), obwohl das normalerweise nicht notwendig ist.

Die2 inyears[2] wird durch eine implizitetoString-Konvertierung von der JavaScript-Engine in eine Zeichenfolge umgewandelt. Infolgedessen würden'2' und'02' auf zwei verschiedene Slots imyears-Objekt verweisen und das folgende Beispiel könntetrue sein:

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

Nuryears['2'] ist ein tatsächlicher Array-Index.years['02'] ist eine beliebige Zeichenfolgeigenschaft, die bei der Array-Iteration nicht berücksichtigt wird.

Dielength-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 derlength-Eigenschaft eines Arrays, wenn sie aufgerufen werden.

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

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

Wenn eine Eigenschaft an einem JavaScript-Array gesetzt wird und die Eigenschaft ein gültiger Array-Index ist, der außerhalb der aktuellen Grenzen des Arrays liegt, wird dielength-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 derlength-Eigenschaft erweitert das Array durch Hinzufügen leerer Slots, ohne neue Elemente zu erstellen — nicht einmalundefined.

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); // 10console.log(fruits[8]); // undefined

Das Verringern derlength-Eigenschaft löscht jedoch Elemente.

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

Dies wird auf derlength-Seite weiter erläutert.

Array-Methoden haben unterschiedliche Verhaltensweisen, wenn sie auf leere Slots indünn besetzten Arrays stoßen. Im Allgemeinen behandeln ältere Methoden (z.B.forEach) leere Slots anders als Indizes, dieundefined enthalten.

Methoden, die eine besondere Behandlung für leere Slots haben, umfassen:concat(),copyWithin(),every(),filter(),flat(),flatMap(),forEach(),indexOf(),lastIndexOf(),map(),reduce(),reduceRight(),reverse(),slice(),some(),sort() undsplice(). Iterationsmethoden wieforEach besuchen überhaupt keine leeren Slots. Andere Methoden, wieconcat,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: purplecolors.reverse(); // ['purple', empty × 2, 'blue', 'yellow', 'red']

Neuere Methoden (z.B.keys) behandeln leere Slots nicht speziell und behandeln sie, als ob sieundefined enthalten. Methoden, die leere Slots mitundefined-Elementen verwechseln, umfassen:entries(),fill(),find(),findIndex(),findLast(),findLastIndex(),includes(),join(),keys(),toLocaleString(),toReversed(),toSorted(),toSpliced(),values() undwith().

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: purpleconst newColors = colors.toReversed(); // ['purple', undefined, undefined, 'blue', 'yellow', 'red']

Einige Methoden ändern nicht das bestehende Array, auf dem die Methode aufgerufen wurde, sondern geben stattdessen ein neues Array zurück. Sie tun dies, indem sie zunächst ein neues Array erstellen und es dann mit Elementen füllen. Das Kopieren erfolgt immerflach — die Methode kopiert niemals etwas über das zunächst erstellte Array hinaus. Elemente des ursprünglichen Arrays (oder der 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 bedeutet, dass wenn ein referenziertes Objekt geändert wird, die Änderungen sowohl im neuen als auch im ursprünglichen Array sichtbar sind.
• Primitive Typen wie Zeichenfolgen, Zahlen und Booleans (nichtString,Number, undBoolean Objekte): ihre Werte werden in das neue Array kopiert.

Andere Methoden ändern das Array, auf dem die Methode aufgerufen wurde. In diesem Fall unterscheidet sich der Rückgabewert je nach Methode: manchmal ist es eine Referenz auf dasselbe Array, manchmal die Länge des neuen Arrays.

Die folgenden Methoden erstellen neue Arrays, indem siethis.constructor[Symbol.species] aufrufen, um den zu verwendenden Konstruktor zu bestimmen:concat(),filter(),flat(),flatMap(),map(),slice(), undsplice() (um das Array der zurückgegebenen entfernten Elemente zu konstruieren).

Die folgenden Methoden erstellen immer neue Arrays mit demArray-Basiskonstruktor:toReversed(),toSorted(),toSpliced(), undwith().

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

Eine einfache Möglichkeit, eine mutierende Methode in eine nicht-mutierende Alternative zu ändern, besteht darin, dieSpread-Syntax oderslice() zu verwenden, um zuerst eine Kopie zu erstellen:

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

Viele Array-Methoden nehmen eine Callback-Funktion als Argument an. 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 haben alle die gleiche Signatur:

method(callbackFn, thisArg)

WocallbackFn 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.

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

DasthisArg-Argument (standardmäßigundefined) wird alsthis-Wert verwendet, wenncallbackFn aufgerufen wird. Der schließlich durchcallbackFn beobachtbarethis-Wert wird gemäßden üblichen Regeln bestimmt: WenncallbackFnnicht strikt ist, werden primitivethis-Werte in Objekte eingebettet undundefined/null wird mitglobalThis ersetzt. DasthisArg-Argument ist fürcallbackFn, das mit einerPfeilfunktion definiert ist, irrelevant, da Pfeilfunktionen keinen eigenenthis-Bindung haben.

Dasarray-Argument, das ancallbackFn übergeben wird, 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 sich auf das aktuelle Array bezieht. Sie sollten das Array während der Iteration im Allgemeinen nicht mutieren (sieheMutieren des ursprünglichen Arrays in iterativen Methoden), aber Sie können auch dieses Argument verwenden, um dies zu tun. Dasarray-Argument istnicht das Array, das erstellt wird, im Fall von Methoden wiemap(),filter() undflatMap() — es gibt keine Möglichkeit, von der Callback-Funktion aus auf das zu erstellende Array zuzugreifen.

Alle iterativen Methoden sindkopierend undgenerisch, obwohl sie sich anders verhalten mitleeren Slots.

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

Insbesondereevery(),find(),findIndex(),findLast(),findLastIndex(), undsome() rufencallbackFn nicht immer für jedes Element auf — sie stoppen die Iteration, sobald der Rückgabewert bestimmt ist.

Die Methodenreduce() undreduceRight() nehmen ebenfalls eine Callback-Funktion an und führen sie höchstens einmal für jedes Element im Array aus, aber sie haben leicht unterschiedliche Signaturen im Vergleich zu typischen iterativen Methoden (zum Beispiel akzeptieren sie nichtthisArg).

Die Methodesort() nimmt ebenfalls eine Callback-Funktion an, ist jedoch keine iterative Methode. Sie verändert das Array an Ort und Stelle, akzeptiert keinthisArg und kann die Callback-Funktion mehrmals an einem Index aufrufen.

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

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

Beachten Sie Folgendes:

1. Nicht alle Methoden führen deni in this-Test durch. Die Methodenfind,findIndex,findLast undfindLastIndex tun dies nicht, andere Methoden jedoch schon.
2. Dielength wird vor Beginn der Schleife gemerkt. Dies hat Auswirkungen darauf, wie Einfügungen und Löschungen während der Iteration behandelt werden (sieheMutieren des ursprünglichen Arrays in iterativen Methoden).
3. Die Methode merkt sich nicht den Inhalt des Arrays, daher kann der neue Wert beobachtet werden, wenn ein Index während der Iteration geändert wird.
4. Der obige Code durchläuft das Array in aufsteigender Reihenfolge der Indizes. Einige Methoden durchlaufen es in absteigender Reihenfolge der Indizes (for (let i = length - 1; i >= 0; i--)):reduceRight(),findLast(), undfindLastIndex().
5. reduce undreduceRight haben leicht unterschiedliche Signaturen und beginnen nicht immer mit dem ersten/letzten Element.

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

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

Normalisierung derlength-Eigenschaft

Dielength-Eigenschaft wirdin eine Ganzzahl umgewandelt und dann auf den Bereich zwischen 0 und 2⁵³ - 1 begrenzt.NaN wird zu0, sodass selbst wennlength nicht vorhanden ist oderundefined ist, es sich verhält, als ob es den Wert0 hat.

Die Sprache vermeidet es,length auf eineunsichere Ganzzahl zu setzen. Alle eingebauten Methoden lösen einenTypeError aus, wennlength auf eine Zahl größer als 2⁵³ - 1 gesetzt wird. Da jedoch dielength-Eigenschaft von Arrays einen Fehler auslöst, wenn sie auf größer als 2³² - 1 gesetzt wird, wird die Grenze der sicheren Ganzzahl normalerweise nicht erreicht, es sei denn, die Methode wird auf einem Nicht-Array-Objekt aufgerufen.

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

Einige Array-Methoden setzten dielength-Eigenschaft des Array-Objekts. Sie setzen den Wert immer nach der Normalisierung, sodasslength immer als Ganzzahl endet.

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

Array-ähnliche Objekte

Der Begriffarray-ähnliches Objekt bezieht sich auf ein Objekt, das während deslength-Konvertierungsprozesses, der oben beschrieben wurde, keinen Fehler auslöst. In der Praxis wird von einem solchen Objekt erwartet, dass es tatsächlich einelength-Eigenschaft hat und indizierte Elemente im Bereich von0 bislength - 1 hat. (Wenn es nicht alle Indizes hat, ist es funktionell gleich einemdünn besetzten Array.) Jeder ganze Index kleiner als null oder größer alslength - 1 wird ignoriert, wenn eine Array-Methode auf einem array-ähnlichen Objekt arbeitet.

Viele DOM-Objekte sind array-ähnlich — zum BeispielNodeList undHTMLCollection. Dasarguments-Objekt ist ebenfalls array-ähnlich. Sie können Array-Methoden 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 neuesArray-Objekt.

Array[Symbol.species]

Gibt denArray-Konstruktor zurück.

Array.from()

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

Array.fromAsync()

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

Array.isArray()

Gibttrue zurück, wenn das Argument ein Array ist, andernfallsfalse.

Array.of()

Erstellt eine neueArray-Instanz mit einer variablen Anzahl von Argumenten, ungeachtet der Anzahl oder des Typs der Argumente.

Diese Eigenschaften sind definiert aufArray.prototype und werden von allenArray-Instanzen gemeinsam genutzt.

Array.prototype.constructor

Die Konstruktorfunktion, die das Instanzobjekt erstellt hat. BeiArray-Instanzen ist der Anfangswert derArray-Konstruktor.

Array.prototype[Symbol.unscopables]

Enthält Eigenschaftsnamen, die in der ECMAScript-Norm vor der Version ES2015 nicht enthalten waren und die fürwith Anweisungsbindungen ignoriert werden.

Diese Eigenschaften sind eigene Eigenschaften jederArray-Instanz.

length

Reflektiert die Anzahl der Elemente in einem Array.

Array.prototype.at()

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

Array.prototype.copyWithin()

Kopiert eine Sequenz von Array-Elementen innerhalb eines Arrays.

Array.prototype.entries()

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

Array.prototype.every()

Gibttrue 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 mit allen Elementen des aufrufenden Arrays zurück, für die die bereitgestellte Filterfunktiontrue zurückgibt.

Array.prototype.find()

Gibt den Wert des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt, oderundefined, 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, oderundefined, 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 rekursiv bis zur angegebenen Tiefe miteinander verbunden 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 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 gibttrue oderfalse zurück, je nachdem.

Array.prototype.indexOf()

Gibt den ersten (niedrigsten) 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 neuenArray-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 des aufrufenden Arrays enthält.

Array.prototype.pop()

Entfernt das letzte Element eines Arrays und gibt dieses Element zurück.

Array.prototype.push()

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

Array.prototype.reduce()

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

Array.prototype.reduceRight()

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

Array.prototype.reverse()

Kehrt die Reihenfolge der Elemente eines Arraysin place um. (Das erste wird zum letzten, das letzte wird zum ersten.)

Array.prototype.shift()

Entfernt das erste Element eines Arrays 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()

Gibttrue 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 in ein Array ein und/oder entfernt Elemente aus einem Array.

Array.prototype.toLocaleString()

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

Array.prototype.toReversed()

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

Array.prototype.toSorted()

Gibt ein neues Array zurück, in dem die Elemente in aufsteigender Reihenfolge sortiert sind, ohne das Original-Array zu ändern.

Array.prototype.toSpliced()

Gibt ein neues Array mit einigen entfernten und/oder an einem gegebenen Index ersetzten Elementen zurück, ohne das Original-Array zu ändern.

Array.prototype.toString()

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

Array.prototype.unshift()

Fügt ein oder mehrere Elemente an der Vorderseite eines Arrays hinzu und gibt die neuelength des Arrays zurück.

Array.prototype.values()

Gibt ein neuesArray-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 gegebenen Wert ersetzt wird, ohne das Original-Array zu ändern.

Array.prototype[Symbol.iterator]()

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

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

Dieses Beispiel zeigt drei Möglichkeiten, ein neues Array zu erstellen: Zuerst mitArray-Literalnotation, dann mit demArray()-Konstruktor und schließlich mitString.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 diejoin()-Methode, um einen String aus demfruits-Array zu erstellen.

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

Dieses Beispiel zeigt, wie man auf Elemente imfruits-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 dieindexOf()-Methode, um die Position (Index) des Strings"Banana" imfruits-Array zu finden.

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

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

const fruits = ["Apple", "Banana"];fruits.includes("Banana"); // truefruits.includes("Cherry"); // false// If indexOf() doesn't return -1, the array contains the given item.fruits.indexOf("Banana") !== -1; // truefruits.indexOf("Cherry") !== -1; // false

Dieses Beispiel verwendet diepush()-Methode, um einen neuen String an dasfruits-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 diepop()-Methode, um das letzte Element aus demfruits-Array zu entfernen.

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

Dieses Beispiel verwendet diesplice()-Methode, um die letzten 3 Elemente aus demfruits-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 diesplice()-Methode, um dasfruits-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 dieshift()-Methode, um das erste Element aus demfruits-Array zu entfernen.

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

Dieses Beispiel verwendet diesplice()-Methode, um die ersten 3 Elemente aus demfruits-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 dieunshift()-Methode, um an Index0 ein neues Element zumfruits-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 diesplice()-Methode, um den String"Banana" aus demfruits-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 diesplice()-Methode, um die Strings"Banana" und"Strawberry" aus demfruits-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 diesplice()-Methode, um die letzten 2 Elemente imfruits-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 einefor...of-Schleife, um über dasfruits-Array zu iterieren und jedes Element in die Konsole zu protokollieren.

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

Aberfor...of ist nur eine von vielen Möglichkeiten, über ein Array zu iterieren; für weitere Möglichkeiten sieheSchleifen und Iterationen und die Dokumentation für die Methodenevery(),filter(),flatMap(),map(),reduce() undreduceRight() — und siehe das nächste Beispiel, das dieforEach()-Methode verwendet.

Dieses Beispiel verwendet dieforEach()-Methode, um auf jedes Element imfruits-Array eine Funktion aufzurufen; die Funktion sorgt dafür, dass jedes Element in die 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 dieconcat()-Methode, um dasfruits-Array mit einemmoreFruits-Array zu kombinieren und ein neuescombinedFruits-Array zu erzeugen. Beachten Sie, dassfruits undmoreFruits 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 bestehendenfruits-Array zu erstellen: zuerst durch die Verwendung derSpread-Syntax, dann durch die Verwendung derfrom()-Methode und schließlich durch die Verwendung derslice()-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() undArray.prototype.concat()) erstellenflache Kopien. Wenn Sie stattdessen einetiefe Kopie eines Arrays erstellen möchten, können SieJSON.stringify() verwenden, um das Array in einen JSON-String zu konvertieren, und dannJSON.parse(), um den String zurück in ein neues Array zu konvertieren, das völlig unabhängig vom ursprünglichen Array ist.

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

Sie können auch tiefe Kopien mit derstructuredClone()-Methode erstellen, die den Vorteil bietet, dassübertragbare Objekte in der Quelle in die neue Kopieübertragen werden können, 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 alsstrikt gleich ausgewertet). Daher wirkt sich jede Änderung entweder auf den Wert des ursprünglichen Arrays oder auf den Wert der neuen Variablen aus:

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' inboard[6][4] nachboard[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 2board[4][4] = board[6][4];board[6][4] = " ";console.log(board.join("\n"));

Hier ist die Ausgabe:

R,N,B,Q,K,B,N,RP,P,P,P,P,P,P,P , , , , , , , , , , , , , , , , , , , , , , , , , , , ,p,p,p,p,p,p,p,pr,n,b,q,k,b,n,rR,N,B,Q,K,B,N,RP,P,P,P,P,P,P,P , , , , , , , , , , , , , , , , , ,p, , , , , , , , , ,p,p,p,p, ,p,p,pr,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);

Ergebnisse in

// The first column is the index0  1    01  2    22  4    83  8    184  16   325  32   506  64   727  128  988  256  1289  512  162

Das Ergebnis eines Vergleichs zwischen einemRegExp und einer Zeichenkette kann ein JavaScript-Array erstellen, das Eigenschaften und Elemente hat, die Informationen über den Vergleich liefern. Ein solches Array wird vonRegExp.prototype.exec() undString.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 caseconst myRe = /d(b+)(d)/i;const execResult = myRe.exec("cdbBdbsbz");console.log(execResult.input); // 'cdbBdbsbz'console.log(execResult.index); // 1console.log(execResult); // [ "dbBd", "bB", "d" ]

Weitere Informationen über das Ergebnis eines Vergleichs finden Sie auf den SeitenRegExp.prototype.exec() undString.prototype.match().

Iterative Methoden mutieren nicht das Array, auf dem sie aufgerufen werden, aber die bereitgestellte FunktioncallbackFn kann es. Der Schlüsselgrundsatz, den Sie sich merken sollten, ist, dass nur Indizes zwischen 0 undarrayLength - 1 besucht werden, wobeiarrayLength die Länge des Arrays ist, wenn die Array-Methode zuerst aufgerufen wurde, aber das an den Callback übergebene Element der Wert ist, wenn der Index besucht wird. Daher:

• callbackFn besucht keine Elemente, die über die anfängliche Länge des Arrays hinaus hinzugefügt wurden, als der Aufruf der iterativen Methode begann.
• Änderungen an bereits besuchten Indizes führen nicht dazu, dasscallbackFn erneut aufgerufen wird.
• Wenn ein vorhandenes, noch nicht besuchtes Element des Arrays voncallbackFn geändert wird, ist der Wert des Elements, das ancallbackFn übergeben wird, der Wert zu dem Zeitpunkt, an dem das Element besucht wird. Entfernte Elemente werden nicht besucht.

Die folgenden Beispiele verwenden dieforEach-Methode als Beispiel, aber andere Methoden, die Indizes in aufsteigender Reihenfolge besuchen, funktionieren 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(", ")}]`);}

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

Einfügen vonn Elementen an noch nicht besuchten Indizes, die weniger als die anfängliche Array-Länge sind, wird sie dazu bringen, besucht zu werden. Die letztenn Elemente im ursprünglichen Array, die jetzt einen Index größer als die anfängliche Array-Länge haben, werden nicht besucht:

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

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

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

Einfügen vonn Elementen an bereits besuchten Indizes wird nicht dazu führen, dass sie besucht werden, aber es verschiebt die verbleibenden Elemente umn zurück, sodass der aktuelle Index und dien - 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

Löschen vonn Elementen an noch nicht besuchten Indizes wird dazu führen, dass sie nicht mehr besucht werden. Da das Array geschrumpft ist, besuchen die letztenn Iterationen ausländerische Indizes. Wenn die Methode nicht vorhandene Indizes ignoriert (sieheArray-Methoden und leere Slots), werden die letztenn Iterationen übersprungen; andernfalls erhalten sieundefined:

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

Löschen vonn 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ächstenn Elemente nach dem aktuellen Index übersprungen. Wenn die Methode nicht vorhandene Indizes ignoriert, werden die letztenn Iterationen übersprungen; andernfalls erhalten sieundefined:

testSideEffect((arr, index) => arr.splice(index, 1));// array: [e1, e2, e3, e4], index: 0, elem: e1// Does not visit e2 because e2 now has index 0, which has already been visited// array: [e2, e3, e4], index: 1, elem: e3// Does not visit e4 because e4 now has index 1, which has already been visited// Final array: [e2, e4]// Index 2 is out-of-bounds, so it's not visited// Compare this with find(), which treats nonexistent indexes as undefined:const arr2 = ["e1", "e2", "e3", "e4"];arr2.find((elem, index, arr) => {  console.log(`array: [${arr.join(", ")}], index: ${index}, elem: ${elem}`);  arr.splice(index, 1);  return false;});// array: [e1, e2, e3, e4], index: 0, elem: e1// array: [e2, e3, e4], index: 1, elem: e3// array: [e2, e4], index: 2, elem: undefined// array: [e2, e4], index: 3, elem: undefined

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

• Indizierte Sammlungen Leitfaden
• TypedArray
• ArrayBuffer