Die folgenden Anweisungen erzeugen gleichwertige Arrays:

const arr1 = new Array(element0, element1, /* …, */ elementN);const arr2 = Array(element0, element1, /* …, */ elementN);const arr3 = [element0, element1, /* …, */ elementN];

element0, element1, …, elementN ist eine Liste von Werten für die Elemente des Arrays. Wenn diese Werte angegeben sind, wird das Array mit ihnen als Elemente initialisiert. Dielength-Eigenschaft des Arrays wird auf die Anzahl der Argumente gesetzt.

Die Klammer-Syntax wird als "Array-Literal" oder "Array-Initializer" bezeichnet. Sie ist kürzer als andere Formen der Array-Erstellung und wird daher im Allgemeinen bevorzugt. Weitere Details finden Sie im AbschnittArray-Literale.

Um ein Array mit einer nicht-null Länge, aber ohne Elemente zu erstellen, kann eines der folgenden verwendet werden:

// This...const arr1 = new Array(arrayLength);// … results in the same array as thisconst arr2 = Array(arrayLength);// This has exactly the same effectconst arr3 = [];arr3.length = arrayLength;

Zusätzlich zu einer neu definierten Variable, wie oben gezeigt, können Arrays auch als Eigenschaft eines neuen oder eines vorhandenen Objekts zugewiesen werden:

const obj = {};// …obj.prop = [element0, element1, /* …, */ elementN];// ORconst obj = { prop: [element0, element1, /* …, */ elementN] };

Um ein Array mit einem einzelnen Element zu initialisieren, und das Element ist eineNumber, müssen Sie die Klammer-Syntax verwenden. Wenn ein einzigerNumber-Wert an denArray()-Konstruktor oder die Funktion übergeben wird, wird dieser alsarrayLength, nicht als einzelnes Element interpretiert.

Dies erzeugt ein Array mit nur einem Element: die Nummer 42.

const arr = [42];

Dies erzeugt ein Array ohne Elemente undarr.length wird auf 42 gesetzt.

const arr = Array(42);

Dies entspricht:

const arr = [];arr.length = 42;

Ein Aufruf vonArray(N) führt zu einemRangeError, wennN eine nicht-ganze Zahl ist, deren Bruchteil ungleich null ist. Das folgende Beispiel veranschaulicht dieses Verhalten.

const arr = Array(9.3); // RangeError: Invalid array length

Wenn Ihr Code Arrays mit einzelnen Elementen eines beliebigen Datentyps erstellen muss, ist es sicherer, Array-Literale zu verwenden. Alternativ können Sie zuerst ein leeres Array erstellen, bevor Sie das einzelne Element hinzufügen.

Sie können auch die statische MethodeArray.of verwenden, um Arrays mit einem einzigen Element zu erstellen.

const arr = Array.of(9.3); // arr contains only one element 9.3

Da Elemente auch Eigenschaften sind, können Sie auf sie mitEigenschafts-Accessoren zugreifen. Angenommen, Sie definieren das folgende Array:

const myArray = ["Wind", "Rain", "Fire"];

Sie können auf das erste Element des Arrays alsmyArray[0] verweisen, auf das zweite Element des Arrays alsmyArray[1], usw... Der Index der Elemente beginnt mit null.

const arr = ["one", "two", "three"];arr[2]; // threearr["length"]; // 3

Sie können ein Array befüllen, indem Sie seinen Elementen Werte zuweisen. Zum Beispiel:

const emp = [];emp[0] = "Casey Jones";emp[1] = "Phil Lesh";emp[2] = "August West";

const arr = [];arr[3.4] = "Oranges";console.log(arr.length); // 0console.log(Object.hasOwn(arr, 3.4)); // true

Sie können ein Array auch beim Erstellen befüllen:

const myArray = new Array("Hello", myVar, 3.14159);// ORconst myArray = ["Mango", "Apple", "Orange"];

Auf Implementierungsebene speichert JavaScript die Elemente von Arrays tatsächlich als Standard-Objekteigenschaften, wobei der Array-Index als Eigenschaftsname verwendet wird.

Dielength-Eigenschaft ist besonders. Ihr Wert ist immer eine positive ganze Zahl, die größer ist als der Index des letzten Elements, wenn ein solches existiert. (Im untenstehenden Beispiel wird'Dusty' bei30 indiziert, also gibtcats.length30 + 1 zurück).

Denken Sie daran, dass JavaScript-Array-Indizes 0-basiert sind: Sie beginnen bei0, nicht bei1. Das bedeutet, dass dielength-Eigenschaft um eins größer ist als der höchste gespeicherte Index im Array:

const cats = [];cats[30] = ["Dusty"];console.log(cats.length); // 31

Sie können auch derlength-Eigenschaft einen Wert zuweisen.

Das Schreiben eines Wertes, der kürzer ist als die Anzahl der gespeicherten Elemente, kürzt das Array. Das Schreiben von0 leert es vollständig:

const cats = ["Dusty", "Misty", "Twiggy"];console.log(cats.length); // 3cats.length = 2;console.log(cats); // [ 'Dusty', 'Misty' ] - Twiggy has been removedcats.length = 0;console.log(cats); // []; the cats array is emptycats.length = 3;console.log(cats); // [ <3 empty items> ]

Eine häufige Operation ist das Iterieren über die Werte eines Arrays, bei der jeder in irgendeiner Weise bearbeitet wird, wie folgt:

const colors = ["red", "green", "blue"];for (let i = 0; i < colors.length; i++) {  console.log(colors[i]);}

Wenn Sie wissen, dass keines der Elemente in Ihrem Array in einem booleschen Kontextfalse ergibt—wenn Ihr Array beispielsweise nur ausDOM-Knoten besteht—können Sie ein effizienteres Idiom verwenden:

const divs = document.getElementsByTagName("div");for (let i = 0, div; (div = divs[i]); i++) {  /* Process div in some way */}

Dies vermeidet den Overhead der Überprüfung der Länge des Arrays und stellt sicher, dass diediv-Variable jedes Mal im Schleifenlauf dem aktuellen Element zugewiesen wird, um zusätzlichen Komfort zu bieten.

DieforEach()-Methode bietet eine weitere Möglichkeit, über ein Array zu iterieren:

const colors = ["red", "green", "blue"];colors.forEach((color) => console.log(color));// red// green// blue

Die anforEach übergebene Funktion wird einmal für jedes Element im Array ausgeführt, wobei das Array-Element als Argument an die Funktion übergeben wird. Nicht zugewiesene Werte werden in einerforEach-Schleife nicht iteriert.

Beachten Sie, dass die Elemente eines Arrays, die weggelassen werden, wenn das Array definiert wird, beim Iterieren mitforEach nicht aufgelistet werden, jedoch aufgelistet werden, wennundefined manuell dem Element zugewiesen wurde:

const sparseArray = ["first", "second", , "fourth"];sparseArray.forEach((element) => {  console.log(element);});// Logs:// first// second// fourthif (sparseArray[2] === undefined) {  console.log("sparseArray[2] is undefined"); // true}const nonsparseArray = ["first", "second", undefined, "fourth"];nonsparseArray.forEach((element) => {  console.log(element);});// Logs:// first// second// undefined// fourth

Da JavaScript-Array-Elemente als Standard-Objekteigenschaften gespeichert werden, ist es nicht ratsam, über JavaScript-Arrays mitfor...in-Schleifen zu iterieren, da normale Elemente und alle aufzählbaren Eigenschaften aufgelistet werden.

DasArray-Objekt verfügt über die folgenden Methoden:

Dieconcat()-Methode verbindet zwei oder mehr Arrays und gibt ein neues Array zurück.

let myArray = ["1", "2", "3"];myArray = myArray.concat("a", "b", "c");// myArray is now ["1", "2", "3", "a", "b", "c"]

Diejoin()-Methode verbindet alle Elemente eines Arrays zu einem String.

const myArray = ["Wind", "Rain", "Fire"];const list = myArray.join(" - "); // list is "Wind - Rain - Fire"

Diepush()-Methode fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die resultierendelength des Arrays zurück.

const myArray = ["1", "2"];myArray.push("3"); // myArray is now ["1", "2", "3"]

Diepop()-Methode entfernt das letzte Element aus einem Array und gibt dieses Element zurück.

const myArray = ["1", "2", "3"];const last = myArray.pop();// myArray is now ["1", "2"], last = "3"

Dieshift()-Methode entfernt das erste Element aus einem Array und gibt dieses Element zurück.

const myArray = ["1", "2", "3"];const first = myArray.shift();// myArray is now ["2", "3"], first is "1"

Dieunshift()-Methode fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu und gibt die neue Länge des Arrays zurück.

const myArray = ["1", "2", "3"];myArray.unshift("4", "5");// myArray becomes ["4", "5", "1", "2", "3"]

Dieslice()-Methode extrahiert einen Abschnitt eines Arrays und gibt ein neues Array zurück.

let myArray = ["a", "b", "c", "d", "e"];myArray = myArray.slice(1, 4); // [ "b", "c", "d"]// starts at index 1 and extracts all elements// until index 3

Dieat()-Methode gibt das Element am angegebenen Index im Array zurück oderundefined, wenn der Index außerhalb des Bereichs liegt. Sie wird besonders bei negativen Indizes verwendet, die Elemente vom Ende des Arrays aus zugreifen.

const myArray = ["a", "b", "c", "d", "e"];myArray.at(-2); // "d", the second-last element of myArray

Diesplice()-Methode entfernt Elemente aus einem Array und (optional) ersetzt sie. Sie gibt die Elemente zurück, die aus dem Array entfernt wurden.

const myArray = ["1", "2", "3", "4", "5"];myArray.splice(1, 3, "a", "b", "c", "d");// myArray is now ["1", "a", "b", "c", "d", "5"]// This code started at index one (or where the "2" was),// removed 3 elements there, and then inserted all consecutive// elements in its place.

Diereverse()-Methode vertauscht die Elemente eines Arrays in-place: Das erste Array-Element wird das letzte und das letzte wird das erste. Sie gibt eine Referenz zum Array zurück.

const myArray = ["1", "2", "3"];myArray.reverse();// transposes the array so that myArray = ["3", "2", "1"]

Dieflat()-Methode gibt ein neues Array zurück, bei dem alle Unter-Array-Elemente rekursiv bis zur angegebenen Tiefe verkettet wurden.

let myArray = [1, 2, [3, 4]];myArray = myArray.flat();// myArray is now [1, 2, 3, 4], since the [3, 4] subarray is flattened

Diesort()-Methode sortiert die Elemente eines Arrays in-place und gibt eine Referenz zum Array zurück.

const myArray = ["Wind", "Rain", "Fire"];myArray.sort();// sorts the array so that myArray = ["Fire", "Rain", "Wind"]

sort() kann auch eine Callback-Funktion akzeptieren, um festzulegen, wie Array-Elemente verglichen werden. Die Callback-Funktion wird mit zwei Argumenten aufgerufen, die zwei Werte aus dem Array sind. Die Funktion vergleicht diese beiden Werte und gibt eine positive Zahl, eine negative Zahl oder null zurück, welche die Reihenfolge der beiden Werte angibt. Zum Beispiel wird das folgende Beispiel das Array nach dem letzten Buchstaben eines Strings sortieren:

const sortFn = (a, b) => {  if (a[a.length - 1] < b[b.length - 1]) {    return -1; // Negative number => a < b, a comes before b  } else if (a[a.length - 1] > b[b.length - 1]) {    return 1; // Positive number => a > b, a comes after b  }  return 0; // Zero => a = b, a and b keep their original order};myArray.sort(sortFn);// sorts the array so that myArray = ["Wind","Fire","Rain"]

• wenna nach dem Sortiersystem kleiner alsb ist, geben Sie-1 (oder irgendeine negative Zahl) zurück
• wenna nach dem Sortiersystem größer alsb ist, geben Sie1 (oder irgendeine positive Zahl) zurück
• wenna undb als gleichwertig angesehen werden, geben Sie0 zurück.

DieindexOf()-Methode durchsucht das Array nachsearchElement und gibt den Index des ersten Treffers zurück.

const a = ["a", "b", "a", "b", "a"];console.log(a.indexOf("b")); // 1// Now try again, starting from after the last matchconsole.log(a.indexOf("b", 2)); // 3console.log(a.indexOf("z")); // -1, because 'z' was not found

DielastIndexOf()-Methode funktioniert wieindexOf, beginnt jedoch am Ende und sucht rückwärts.

const a = ["a", "b", "c", "d", "a", "b"];console.log(a.lastIndexOf("b")); // 5// Now try again, starting from before the last matchconsole.log(a.lastIndexOf("b", 4)); // 1console.log(a.lastIndexOf("z")); // -1

DieforEach()-Methode führtcallback auf jedem Array-Element aus und gibtundefined zurück.

const a = ["a", "b", "c"];a.forEach((element) => {  console.log(element);});// Logs:// a// b// c

DieforEach-Methode (und die unten stehenden anderen), die einen Callback akzeptieren, sind alsiterative Methoden bekannt, weil sie über das gesamte Array in irgendeiner Weise iterieren. Jede nimmt ein optionales zweites Argument namensthisArg. Wenn es angegeben wird, wirdthisArg der Wert desthis-Schlüsselworts im Körper der Callback-Funktion. Wenn nicht, wie in anderen Fällen, in denen eine Funktion außerhalb eines expliziten Objekt-Kontexts aufgerufen wird, bezieht sichthis auf das globale Objekt (window,globalThis usw.), wenn die Funktionnicht streng ist, oderundefined, wenn die Funktion strikt ist.

Diemap()-Methode gibt ein neues Array des Rückgabewerts voncallback auf jedem Array-Element zurück.

const a1 = ["a", "b", "c"];const a2 = a1.map((item) => item.toUpperCase());console.log(a2); // ['A', 'B', 'C']

DieflatMap()-Methode läuftmap() gefolgt von einemflat() der Tiefe 1 aus.

const a1 = ["a", "b", "c"];const a2 = a1.flatMap((item) => [item.toUpperCase(), item.toLowerCase()]);console.log(a2); // ['A', 'a', 'B', 'b', 'C', 'c']

Diefilter()-Methode gibt ein neues Array zurück, das die Elemente enthält, für diecallbacktrue zurückgegeben hat.

const a1 = ["a", 10, "b", 20, "c", 30];const a2 = a1.filter((item) => typeof item === "number");console.log(a2); // [10, 20, 30]

Diefind()-Methode gibt das erste Element zurück, für dascallbacktrue zurückgegeben hat.

const a1 = ["a", 10, "b", 20, "c", 30];const i = a1.find((item) => typeof item === "number");console.log(i); // 10

DiefindLast()-Methode gibt das letzte Element zurück, für dascallbacktrue zurückgegeben hat.

const a1 = ["a", 10, "b", 20, "c", 30];const i = a1.findLast((item) => typeof item === "number");console.log(i); // 30

DiefindIndex()-Methode gibt den Index des ersten Elements zurück, für dascallbacktrue zurückgegeben hat.

const a1 = ["a", 10, "b", 20, "c", 30];const i = a1.findIndex((item) => typeof item === "number");console.log(i); // 1

DiefindLastIndex()-Methode gibt den Index des letzten Elements zurück, für dascallbacktrue zurückgegeben hat.

const a1 = ["a", 10, "b", 20, "c", 30];const i = a1.findLastIndex((item) => typeof item === "number");console.log(i); // 5

Dieevery()-Methode gibttrue zurück, wenncallback für jedes Element im Arraytrue zurückgibt.

function isNumber(value) {  return typeof value === "number";}const a1 = [1, 2, 3];console.log(a1.every(isNumber)); // trueconst a2 = [1, "2", 3];console.log(a2.every(isNumber)); // false

Diesome()-Methode gibttrue zurück, wenncallback für mindestens ein Element im Arraytrue zurückgibt.

function isNumber(value) {  return typeof value === "number";}const a1 = [1, 2, 3];console.log(a1.some(isNumber)); // trueconst a2 = [1, "2", 3];console.log(a2.some(isNumber)); // trueconst a3 = ["1", "2", "3"];console.log(a3.some(isNumber)); // false

Diereduce()-Methode wendetcallback(accumulator, currentValue, currentIndex, array) auf jeden Wert im Array an, um die Liste der Elemente auf einen einzelnen Wert zu reduzieren. Diereduce-Funktion gibt den Endwert zurück, den diecallback-Funktion zurückgegeben hat.

WenninitialValue angegeben ist, wirdcallback mitinitialValue als erstem Parameterwert und dem Wert des ersten Elements im Array als zweitem Parameterwert aufgerufen.

WenninitialValuenicht angegeben ist, lauten die beiden ersten Parameterwerte voncallback die ersten beiden Elemente des Arrays. Beijedem nachfolgenden Aufruf wird der Wert des ersten Parameters das, wascallback beim vorherigen Aufruf zurückgegeben hat, und der Wert des zweiten Parameters der nächste Wert im Array.

Wenncallback Zugriff auf den Index des bearbeiteten Elements benötigt oder Zugriff auf das gesamte Array, stehen diese als optionale Parameter zur Verfügung.

const a = [10, 20, 30];const total = a.reduce(  (accumulator, currentValue) => accumulator + currentValue,  0,);console.log(total); // 60

DiereduceRight()-Methode funktioniert wiereduce(), beginnt jedoch mit dem letzten Element.

reduce undreduceRight sind die am wenigsten offensichtlichen der iterativen Array-Methoden. Sie sollten für Algorithmen verwendet werden, die zwei Werte rekursiv kombinieren, um eine Sequenz auf einen einzelnen Wert zu reduzieren.

Sie können zwischen Arrays und anderen Datenstrukturen hin und her transformieren.

Die MethodeObject.groupBy() kann verwendet werden, um die Elemente eines Arrays zu gruppieren, indem eine Testfunktion verwendet wird, die einen String zurückgibt, der die Gruppe des aktuellen Elements angibt.

Hier haben wir ein Inventar-Array, das "food"-Objekte enthält, die einenname und einentype haben.

const inventory = [  { name: "asparagus", type: "vegetables" },  { name: "bananas", type: "fruit" },  { name: "goat", type: "meat" },  { name: "cherries", type: "fruit" },  { name: "fish", type: "meat" },];

UmObject.groupBy() zu verwenden, geben Sie eine Callback-Funktion an, die mit dem aktuellen Element (und optional dem aktuellen Index und Array) aufgerufen wird und einen String zurückgibt, der die Gruppe des Elements angibt.

Der untenste Code verwendet eine Pfeilfunktion, um dentype jedes Array-Elements zurückzugeben (dies verwendetObjektdestrukturierungssyntax für Funktionsargumente, um dastype-Element aus dem übergebenen Objekt zu entpacken). Das Ergebnis ist ein Objekt, das Eigenschaften mit den Namen der einzigartigen Strings enthält, die vom Callback zurückgegeben werden. Jede Eigenschaft wird einem Array zugewiesen, das die Gruppen der Elemente enthält.

const result = Object.groupBy(inventory, ({ type }) => type);console.log(result);// Logs// {//   vegetables: [{ name: 'asparagus', type: 'vegetables' }],//   fruit: [//     { name: 'bananas', type: 'fruit' },//     { name: 'cherries', type: 'fruit' }//   ],//   meat: [//     { name: 'goat', type: 'meat' },//     { name: 'fish', type: 'meat' }//   ]// }

Es ist zu beachten, dass das zurückgegebene Objekt auf diegleichen Elemente wie das ursprüngliche Array verweist (alsokeine tiefen Kopien). Änderungen an der internen Struktur dieser Elemente werden sowohl im ursprünglichen Array als auch im zurückgegebenen Objekt widergespiegelt.

Wenn Sie keinen String als Schlüssel verwenden können, zum Beispiel, wenn die Gruppierungsinformation mit einem Objekt verknüpft ist, das sich ändern könnte, können Sie stattdessenMap.groupBy() verwenden. Dies ist sehr ähnlich zuObject.groupBy(), außer dass es die Elemente des Arrays in eineMap gruppiert, die einen beliebigen Wert (Objekt oderPrimitive) als Schlüssel verwenden kann.

Arrays können "leere Plätze" enthalten, die nicht mit Plätzen gefüllt sind, die den Wertundefined enthalten. Leere Plätze können auf eine der folgenden Arten erstellt werden:

// Array constructor:const a = Array(5); // [ <5 empty items> ]// Consecutive commas in array literal:const b = [1, 2, , , 5]; // [ 1, 2, <2 empty items>, 5 ]// Directly setting a slot with index greater than array.length:const c = [1, 2];c[4] = 5; // [ 1, 2, <2 empty items>, 5 ]// Elongating an array by directly setting .length:const d = [1, 2];d.length = 5; // [ 1, 2, <3 empty items> ]// Deleting an element:const e = [1, 2, 3, 4, 5];delete e[2]; // [ 1, 2, <1 empty item>, 4, 5 ]

In einigen Operationen verhalten sich leere Plätze, als wären sie mitundefined gefüllt.

const arr = [1, 2, , , 5]; // Create a sparse array// Indexed accessconsole.log(arr[2]); // undefined// For...offor (const i of arr) {  console.log(i);}// Logs: 1 2 undefined undefined 5// Spreadingconst another = [...arr]; // "another" is [ 1, 2, undefined, undefined, 5 ]

Aber in anderen (insbesondere in Array-Iterationen) werden leere Plätze übersprungen.

const mapped = arr.map((i) => i + 1); // [ 2, 3, <2 empty items>, 6 ]arr.forEach((i) => console.log(i)); // 1 2 5const filtered = arr.filter(() => true); // [ 1, 2, 5 ]const hasFalsy = arr.some((k) => !k); // false// Property enumerationconst keys = Object.keys(arr); // [ '0', '1', '4' ]for (const key in arr) {  console.log(key);}// Logs: '0' '1' '4'// Spreading into an object uses property enumeration, not the array's iteratorconst objectSpread = { ...arr }; // { '0': 1, '1': 2, '4': 5 }

Eine vollständige Liste, wie Array-Methoden mit Sparse Arrays umgehen, finden Sie auf derArray-Referenzseite.

Arrays können verschachtelt werden, was bedeutet, dass ein Array ein anderes Array als Element enthalten kann. Durch diese Eigenschaft von JavaScript-Arrays können mehrdimensionale Arrays erstellt werden.

Der folgende Code erstellt ein zweidimensionales Array.

const a = new Array(4);for (let i = 0; i < 4; i++) {  a[i] = new Array(4);  for (let j = 0; j < 4; j++) {    a[i][j] = `[${i}, ${j}]`;  }}

Dieses Beispiel erstellt ein Array mit den folgenden Zeilen:

Row 0: [0, 0] [0, 1] [0, 2] [0, 3]Row 1: [1, 0] [1, 1] [1, 2] [1, 3]Row 2: [2, 0] [2, 1] [2, 2] [2, 3]Row 3: [3, 0] [3, 1] [3, 2] [3, 3]

Arrays können auch wie Objekte verwendet werden, um zusammengehörige Informationen zu speichern.

const arr = [1, 2, 3];arr.property = "value";console.log(arr.property); // "value"

Zum Beispiel, wenn ein Array das Ergebnis eines Abgleichs zwischen einem regulären Ausdruck und einem String ist, gibt das Array Eigenschaften und Elemente zurück, die Informationen über den Abgleich liefern. Ein Array ist der Rückgabewert vonRegExp.prototype.exec(),String.prototype.match() undString.prototype.split(). Weitere Informationen zur Verwendung von Arrays mit regulären Ausdrücken finden Sie im AbschnittReguläre Ausdrücke.

Einige JavaScript-Objekte, wie dasNodeList, das vondocument.getElementsByTagName() zurückgegeben wird, oder dasarguments-Objekt, das innerhalb des Körpers einer Funktion verfügbar ist, sehen auf den ersten Blick wie Arrays aus und verhalten sich auch so, teilen jedoch nicht alle deren Methoden. Dasarguments-Objekt bietet einlength-Attribut, implementiert jedoch keine Array-Methoden wieforEach().

Array-Methoden können nicht direkt auf array-ähnliche Objekte angewendet werden.

function printArguments() {  arguments.forEach((item) => {    console.log(item);  }); // TypeError: arguments.forEach is not a function}

Aber Sie können sie indirekt mitFunction.prototype.call() aufrufen.

function printArguments() {  Array.prototype.forEach.call(arguments, (item) => {    console.log(item);  });}

Array-Prototyp-Methoden können ebenfalls auf Strings angewendet werden, da sie einen sequentiellen Zugang zu ihren Zeichen auf ähnliche Weise wie Arrays bieten:

Array.prototype.forEach.call("a string", (chr) => {  console.log(chr);});

• Zurück
• Weiter