DasArray-Objekt, ähnlich wie Arrays in anderen Programmiersprachen, ermöglicht dasSpeichern einer Sammlung von mehreren Elementen unter einem einzigen Variablennamen und enthält Methoden zumDurchführen gängiger Array-Operationen.

Beschreibung

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

• 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 Indexe angesprochen werden, sondern müssen mit nicht-negativen ganzen Zahlen (oder deren entsprechender Zeichenfolgenform) angesprochen werden.
• JavaScript-Arrays sindnullbasiert: das erste Element eines Arrays hat den Index0, das zweite den Index1 usw. — das letzte Element hat den Wert derlength-Eigenschaft des Arrays minus1.
• JavaScript-Array-Kopieroperationen erstellenflache Kopien. (Alle standardmäßigen eingebauten Kopieroperationen mitbeliebigen JavaScript-Objekten erstellen flache Kopien, statttiefe Kopien).

Array-Indizes

Array-Objekte können keine beliebigen Zeichenfolgen als Elementindizes verwenden (wie in einemassoziativen Array), sondern müssen nicht-negative Ganzzahlen (oder deren entsprechende Zeichenfolgenform) verwenden. Das Festlegen oder Abrufen von nicht-ganzzahligen Indizes setzt oder ruft kein Element aus der Array-Liste selbst ab, sondern setzt oder greift auf eine Variable zu, die mit derObjekteigenschaftensammlung des Arrays verbunden ist. Die Objekteigenschaften des Arrays und die Liste der Array-Elemente sind separat, und dieDurchlauf- und Änderungsoperationen des Arrays können nicht auf diese benannten Eigenschaften angewendet werden.

Array-Elemente sind Objekteigenschaften auf dieselbe Weise, wietoString eine Eigenschaft ist (um genau zu sein,toString() ist jedoch eine Methode). Ein Versuch, ein Element eines Arrays wie folgt anzusprechen, führt jedoch zu einem Syntaxfehler, da der Name der Eigenschaft nicht gültig ist:

arr.0; // a syntax error

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

Die2 inyears[2] wird durch eine implizitetoString-Konvertierung durch die JavaScript-Engine in eine Zeichenfolge umgewandelt. Als Ergebnis 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 Zeichenfolgeneigenschaft, die bei der Array-Iteration nicht besucht wird.

Beziehung zwischen Länge und numerischen Eigenschaften

Dielength-Eigenschaft eines JavaScript-Arrays und numerische Eigenschaften sind verbunden.

Mehrere der eingebauten 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 in einem JavaScript-Array eine Eigenschaft gesetzt wird, wenn diese Eigenschaft ein gültiger Array-Index ist und dieser Index außerhalb der aktuellen Grenzen des Arrays liegt, aktualisiert die Engine dielength-Eigenschaft des Arrays entsprechend:

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

Das Erhöhen derlength erweitert das Array, indem leere Slots hinzugefügt werden, ohne neue Elemente zu erstellen — sogar nichtundefined.

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 der Seitelength ausführlicher erklärt.

Array-Methoden und leere Slots

Array-Methoden zeigen unterschiedliche Verhaltensweisen, wenn sie auf leere Slots inspärlichen Arrays stoßen. Im Allgemeinen behandeln ältere Methoden (z. B.forEach) leere Slots anders als Indizes, dieundefined enthalten.

Methoden, die eine spezielle Behandlung für leere Slots haben, umfassen die folgenden:concat(),copyWithin(),every(),filter(),flat(),flatMap(),forEach(),indexOf(),lastIndexOf(),map(),reduce(),reduceRight(),reverse(),slice(),some(),sort(), undsplice(). Iterationsmethoden wieforEach besuchen leere Slots überhaupt nicht. Andere Methoden wieconcat,copyWithin usw. bewahren leere Slots beim Kopieren, sodass am Ende das Array 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 würden sieundefined enthalten. Methoden, die leere Slots mitundefined-Elementen gleichsetzen, umfassen die folgenden: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']

Kopiermethoden und Methoden, die Arrays verändern

Einige Methoden verändern das bestehende Array, auf dem die Methode aufgerufen wurde, nicht, sondern geben ein neues Array zurück. Sie tun dies, indem sie zuerst ein neues Array konstruieren und es dann mit Elementen befüllen. Der Kopiervorgang erfolgt immer_flach_ – die Methode kopiert nichts über das ursprünglich erstellte Array hinaus. Elemente des ursprünglichen Arrays werden wie folgt in das neue Array kopiert:

• Objekte: Der Objektverweis 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 geändert wird, sind die Änderungen sowohl im neuen als auch im ursprünglichen Array sichtbar.
• Primitive Typen wie Zeichenfolgen, Zahlen und Booleans (nichtString,Number, undBoolean-Objekte): Ihre Werte werden in das neue Array kopiert.

Andere Methoden verändern das Array, auf dem die Methode aufgerufen wurde. In diesem Fall unterscheidet sich ihr Rückgabewert je nach Methode: manchmal ein Verweis auf dasselbe Array, manchmal die Länge des neuen Arrays.

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

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 entsprechenden nicht-verändernden Alternativen:

Eine einfache Möglichkeit, eine verändernde Methode in eine nicht-verändernde Alternative zu ändern, besteht darin, zuerst mit demSpread-Syntax oderslice() 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

Iterative Methoden

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

method(callbackFn, thisArg)

WocallbackFn drei Argumente nimmt:

element

Das aktuelle Element, das im Array verarbeitet wird.

index

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

array

Das Array, auf dem die Methode aufgerufen wurde.

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

DasthisArg-Argument (Standardwert istundefined) wird alsthis-Wert verwendet, wenncallbackFn aufgerufen wird. Der endgültig voncallbackFn beobachtbarethis-Wert wird nachden üblichen Regeln bestimmt: WenncallbackFnnicht-strikt ist, werden primitivethis-Werte in Objekte gewrappt, undundefined/null wird durchglobalThis ersetzt. DasthisArg-Argument ist irrelevant für jedecallbackFn, die mit einerPfeilfunktion definiert ist, da Pfeilfunktionen kein eigenesthis-Binding haben.

Dasarray-Argument, dascallbackFn übergeben wird, ist am nützlichsten, wenn Sie während der Iteration auf einen anderen Index zugreifen möchten, weil Sie möglicherweise nicht immer eine vorhandene Variable haben, die auf das aktuelle Array verweist. Sie sollten im Allgemeinen das Array während der Iteration nicht ändern (sieheÄnderung des ursprünglichen Arrays in iterativen Methoden), aber Sie können dieses Argument auch dafür nutzen. Dasarray-Argument istnicht das Array, das gerade erstellt wird, im Falle von Methoden wiemap(),filter(), undflatMap() — es gibt keine Möglichkeit, auf das erzeugte Array aus der Callback-Funktion zuzugreifen.

Alle iterativen Methoden sindkopierende undgenerische, obwohl sie sich unterschiedlich beileeren Slots verhalten.

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

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

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

Diesort()-Methode nimmt ebenfalls eine Callback-Funktion an, aber sie ist keine iterative Methode. Sie verändert das Array-in-place, akzeptiert keinthisArg, und kann den Callback an einem Index mehrfach aufrufen.

Iterative Methoden durchlaufen das Array wie folgt (viele technische Details sind 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 deni in this-Test aus. Die Methodenfind,findIndex,findLast, undfindLastIndex tun dies nicht, andere Methoden dagegen schon.
2. Dielength wird vor dem Start der Schleife gespeichert. 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 speichert nicht den Inhalt des Arrays, sodass wenn ein Index während der Iteration geä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(), undfindLastIndex().
5. reduce undreduceRight haben leicht unterschiedliche Signaturen und beginnen nicht immer beim ersten/letzten Element.

Generische Array-Methoden

Array-Methoden sind stets generisch — sie greifen auf keine internen Daten des Array-Objekts zu. Sie greifen nur über dielength-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 length-Eigenschaft

Dielength-Eigenschaft wirdin eine ganze Zahl konvertiert und anschließend auf den Bereich zwischen 0 und 2⁵³ - 1 begrenzt.NaN wird zu0, sodass selbst wennlength nicht vorhanden ist oderundefined ist, es sich so verhält, als ob es den Wert0 hat.

Die Sprache verhindert, dasslength auf eineunsichere Ganzzahl gesetzt wird. Alle eingebauten Methoden werden eineTypeError auslösen, wennlength auf eine Zahl größer als 2⁵³ - 1 gesetzt wird. Da jedoch dielength-Eigenschaft von Arrays jedoch einen Fehler auslöst, wenn sie größer als 2³² - 1 gesetzt wird, wird die Grenze für sichere Ganzzahlen normalerweise nicht erreicht, es sei denn, die Methode wird auf einem Nicht-Array-Objekt aufgerufen.

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

Einige Array-Methoden setzen dielength-Eigenschaft des Array-Objekts. Sie setzen den Wert immer nach der Normalisierung, sodasslength immer als ganze Zahl 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 jedes Objekt, das während des in diesem Abschnitt beschriebenenlength-Konvertierungsprozesses keinen Fehler auslöst. In der Praxis wird erwartet, dass ein solches Objekt tatsächlich einelength-Eigenschaft hat und indizierte Elemente im Bereich0 bislength - 1. (Wenn es nicht alle Indizes hat, wird es funktionell einemspärlichen Array gleichkommen.) Jeder ganzzahlige Index, der kleiner als null oder größer alslength - 1 ist, wird ignoriert, wenn eine Array-Methode auf einem array-ähnlichen Objekt ausgeführt wird.

Viele DOM-Objekte sind array-ähnlich — zum BeispielNodeList undHTMLCollection. Dasarguments-Objekt ist auch array-ähnlich. Sie können Array-Methoden darauf aufrufen, selbst wenn sie diese Methoden nicht selbst haben.

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

Konstruktor

Array()

Erstellt ein neuesArray-Objekt.

Statische Eigenschaften

Array[Symbol.species]

Gibt denArray-Konstruktor zurück.

Statische Methoden

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, oderfalse, wenn nicht.

Array.of()

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

Instanz-Eigenschaften

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

Array.prototype.constructor

Die Konstruktionsfunktion, die das Instanzobjekt erstellt hat. BeiArray-Instanzen ist der Startwert derArray-Konstruktor.

Array.prototype[Symbol.unscopables]

Enthält Eigenschaftsnamen, die vor der ES2015-Version nicht im ECMAScript-Standard enthalten waren und die fürwith Statement-Bindungszwecke ignoriert werden.

Diese Eigenschaften sind eigene Eigenschaften jederArray-Instanz.

length

Reflektiert die Anzahl der Elemente in einem Array.

Instanz-Methoden

Array.prototype.at()

Gibt das Array-Element am angegebenen Index zurück. Akzeptiert negative ganze Zahlen, 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 neuesArray-Iterator-Objekt zurück, das die Schlüssel/Wert-Paare für jeden Index in einem Array enthält.

Array.prototype.every()

Gibtfalse zurück, wenn es ein Element im Array findet, das die bereitgestellte Testfunktion nicht erfüllt. Andernfalls gibt estrue zurück.

Array.prototype.fill()

Füllt alle Elemente eines Arrays von einem Start- zu einem End-Index 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 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, in das rekursiv alle Unterarray-Elemente bis zur angegebenen Tiefe verkettet sind.

Array.prototype.flatMap()

Gibt ein neues Array zurück, das gebildet wird, indem eine gegebene Callback-Funktion auf jedes Element des aufrufenden Arrays angewendet und das Ergebnis um eine Ebene abgeflacht wird.

Array.prototype.forEach()

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

Array.prototype.includes()

Bestimmt, ob das aufrufende Array einen Wert enthält, und gibttrue oderfalse entsprechend zurück.

Array.prototype.indexOf()

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

Array.prototype.join()

Verbindet alle Elemente eines Arrays zu einer Zeichenfolge.

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 angegebenes 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 des Aufrufens einer Funktion auf jedes 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 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 einzelnen 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 einzelnen Wert zu reduzieren.

Array.prototype.reverse()

Kehrt die Reihenfolge der Elemente eines Arraysin 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()

Gibttrue zurück, wenn es ein Element im Array findet, das die bereitgestellte Testfunktion erfüllt. Andernfalls gibt esfalse zurück.

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 aus einem Array.

Array.prototype.toLocaleString()

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

Array.prototype.toReversed()

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

Array.prototype.toSorted()

Gibt ein neues Array mit den Elementen in aufsteigender Reihenfolge zurück, 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 eine Zeichenfolge zurück, die das aufrufende Array und seine Elemente darstellt. Überschreibt die MethodeObject.prototype.toString().

Array.prototype.unshift()

Fügt ein oder mehrere Elemente am Anfang 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 mit dem gegebenen Wert ersetzt wurde, ohne das Original-Array zu verändern.

Array.prototype[Symbol.iterator]()

Ein Alias für dievalues()-Methode.

Beispiele

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

Ein Array erstellen

Dieses Beispiel zeigt drei Möglichkeiten, neue Arrays zu erstellen: zuerst mitArray-Literal-Notation, dann mit demArray()-Konstruktor und schließlich mitString.prototype.split(), um das Array aus einer Zeichenfolge 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

Eine Zeichenfolge aus einem Array erstellen

Dieses Beispiel verwendet die Methodejoin(), um eine Zeichenfolge aus demfruits-Array zu erstellen.

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

Auf ein Array-Element über seinen Index zugreifen

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

Den Index eines Elements in einem Array finden

Dieses Beispiel verwendet die MethodeindexOf(), um die Position (den Index) der Zeichenfolge"Banana" imfruits-Array zu finden.

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

Prüfen, ob ein Array ein bestimmtes Element enthält

Dieses Beispiel zeigt zwei Möglichkeiten, um zu überprüfen, ob dasfruits-Array"Banana" und"Cherry" enthält: zuerst mit der Methodeincludes() und dann mit der MethodeindexOf(), 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

Ein Element an ein Array anhängen

Dieses Beispiel verwendet die Methodepush(), um eine neue Zeichenfolge an dasfruits-Array anzuhängen.

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

Das letzte Element aus einem Array entfernen

Dieses Beispiel verwendet die Methodepop(), 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

Mehrere Elemente aus dem Ende eines Arrays entfernen

Dieses Beispiel verwendet die Methodesplice(), 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"]

Ein Array auf seine ersten N Elemente kürzen

Dieses Beispiel verwendet die Methodesplice(), um dasfruits-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"]

Das erste Element aus einem Array entfernen

Dieses Beispiel verwendet die Methodeshift(), 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

Mehrere Elemente vom Anfang eines Arrays entfernen

Dieses Beispiel verwendet die Methodesplice(), 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"]

Ein neues erstes Element zu einem Array hinzufügen

Dieses Beispiel verwendet die Methodeunshift(), um an Index0 ein neues Element zumfruits-Array hinzuzufügen – es wird so zum neuen ersten Element im Array.

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

Ein einzelnes Element nach Index entfernen

Dieses Beispiel verwendet die Methodesplice(), um die Zeichenfolge"Banana" aus demfruits-Array zu entfernen – durch Angabe der Indexposition von"Banana".

const fruits = ["Strawberry", "Banana", "Mango"];const start = fruits.indexOf("Banana");const deleteCount = 1;const removedItems = fruits.splice(start, deleteCount);console.log(fruits);// ["Strawberry", "Mango"]console.log(removedItems);// ["Banana"]

Mehrere Elemente nach Index entfernen

Dieses Beispiel verwendet die Methodesplice(), um die Zeichenfolgen"Banana" und"Strawberry" aus demfruits-Array zu entfernen – durch Angabe der Indexposition von"Banana" und der Anzahl der zu entfernenden Elemente.

const fruits = ["Apple", "Banana", "Strawberry", "Mango"];const start = 1;const deleteCount = 2;const removedItems = fruits.splice(start, deleteCount);console.log(fruits);// ["Apple", "Mango"]console.log(removedItems);// ["Banana", "Strawberry"]

Mehrere Elemente in einem Array ersetzen

Dieses Beispiel verwendet die Methodesplice(), 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"]

Über ein Array iterieren

Dieses Beispiel verwendet einefor...of-Schleife, um über dasfruits-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

Aberfor...of ist nur eine von vielen Möglichkeiten, über ein Array zu iterieren; für weitere Möglichkeiten sehen SieSchleifen und Iteration und die Dokumentation zu den Methodenevery(),filter(),flatMap(),map(),reduce(), undreduceRight() – und sehen Sie sich das nächste Beispiel an, das die MethodeforEach() verwendet.

Eine Funktion auf jedes Element in einem Array aufrufen

Dieses Beispiel verwendet die MethodeforEach(), um eine Funktion auf jedes Element imfruits-Array aufzurufen. Die Funktion sorgt dafür, dass jedes Element zusammen mit der Indexnummer des Elements in der Konsole protokolliert wird.

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

Mehrere Arrays zusammenführen

Dieses Beispiel verwendet die Methodeconcat(), um dasfruits-Array mit einemmoreFruits-Array zu verbinden, um 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"]

Ein Array kopieren

Dieses Beispiel zeigt drei Möglichkeiten, ein neues Array aus dem bestehendenfruits-Array zu erstellen: zuerst mit derSpread-Syntax, dann mit der Methodefrom(), und dann mit der Methodeslice().

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 (wieSpread-Syntax,Array.from(),Array.prototype.slice(), undArray.prototype.concat()) erstellenflache Kopien. Wenn Sie stattdessen einetiefe Kopie eines Arrays wollen, können SieJSON.stringify() verwenden, um das Array in eine JSON-Zeichenfolge zu konvertieren, und dannJSON.parse(), um die Zeichenfolge 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 tiefgehende Kopien mit der MethodestructuredClone() erstellen, die den Vorteil hat, dass sie es erlaubt,übertragbare Objekte in der Quelletransferiert zu kopieren, anstatt sie einfach zu klonen.

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 ein Verweis oder Alias auf das ursprüngliche Array; das heißt, der ursprüngliche Array-Name und der neue Variablenname sind nur zwei Namen für dasselbe Objekt (und werden daher immer alsexakt gleich) ausgewertet. Daher ändern sich alle Änderungen, die entweder an dem Wert des ursprünglichen Arrays oder an dem Wert der neuen Variablen vorgenommen werden, ebenfalls:

const fruits = ["Strawberry", "Mango"];const fruitsAlias = fruits;// 'fruits' and 'fruitsAlias' are the same object, strictly equivalent.fruits === fruitsAlias; // true// Any changes to the 'fruits' array change 'fruitsAlias' too.fruits.unshift("Apple", "Banana");console.log(fruits);// ['Apple', 'Banana', 'Strawberry', 'Mango']console.log(fruitsAlias);// ['Apple', 'Banana', 'Strawberry', 'Mango']

Ein zweidimensionales Array erstellen

Das folgende Beispiel erstellt ein Schachbrett als zweidimensionales Array von Zeichenfolgen. Der erste Zug erfolgt durch Kopieren des'p' inboard[6][4] nachboard[4][4]. 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

Ein Array zur Tabellierung einer Reihe von Werten verwenden

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

Erzeugt

// 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

Ein Array mit dem Ergebnis eines Abgleichs erstellen

Das Ergebnis eines Abgleichs zwischen einemRegExp und einer Zeichenfolge kann ein JavaScript-Array erstellen, das Eigenschaften und Elemente hat, die Informationen über den Match bieten. 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" ]

Für mehr Informationen über das Ergebnis eines Abgleichs, siehe die SeitenRegExp.prototype.exec() undString.prototype.match().

Veränderung des ursprünglichen Arrays in iterativen Methoden

Iterative Methoden verändern das Array, auf dem sie aufgerufen werden, nicht; die bereitgestellte Funktion alscallbackFn kann dies jedoch tun. Das entscheidende Prinzip ist, dass nur Indizes zwischen 0 undarrayLength - 1 besucht werden, wobeiarrayLength die Länge des Arrays zum Zeitpunkt ist, an dem die Array-Methode zuerst aufgerufen wurde, aber das Element, das an den Callback übergeben wird, der Wert ist, der zu dem Zeitpunkt existiert, an dem der Index besucht wird. Daher:

• callbackFn wird keine Elemente besuchen, die jenseits der anfänglichen Länge des Arrays hinzugefügt werden, wenn der Aufruf der iterativen Methode begann.
• Änderungen an bereits besuchten Indizes bewirken nicht, dasscallbackFn erneut aufgerufen wird.
• Wenn ein vorhandenes, bisher noch nicht besuchtes Element des Arrays durchcallbackFn geändert wird, ist der übergebene Wert dercallbackFn 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, arbeiten auf dieselbe 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 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]

Das Einfügen vonn Elementen an nicht besuchten Indizes wird dazu führen, dass diese besucht werden. Die letztenn Elemente im ursprünglichen Array, die jetzt einen Index haben, der größer ist als die anfängliche Array-Länge, werden nicht mehr 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 vonn Elementen mit Index größer als die anfängliche Array-Länge führt nicht dazu, dass diese 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 vonn Elementen an bereits besuchten Indizes führt nicht dazu, dass diese besucht werden, sondern es verschiebt verbleibende Elemente umn, 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

Das Löschen vonn Elementen an nicht besuchten Indizes führt dazu, dass sie nicht mehr besucht werden. Da das Array geschrumpft ist, werden die letztenn Iterationen außerhalb der Grenzen liegende Indizes besuchen. Wenn die Methode nicht existierende 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

Das Löschen vonn Elementen an bereits besuchten Indizes ändert nicht die Tatsache, 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 existierende 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 und das Löschen dazu, dass Elemente mehrmals besucht werden. Passen Sie den obigen Code selbst an, um die Effekte zu sehen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Indizierte Sammlungen Leitfaden
• TypedArray
• ArrayBuffer