[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Indexed_collections [Back]  [Original]

Indizierte Sammlungen - JavaScript | MDN

Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.

View in English Always switch to English

Indizierte Sammlungen

Dieses Kapitel fhrt Sammlungen von Daten ein, die nach einem Indexwert geordnet sind. Dazu gehren Arrays und array-hnliche Konstrukte wie Array-Objekte und TypedArray-Objekte.

Ein Array ist eine geordnete Liste von Werten, die Sie mit einem Namen und einem Index ansprechen.

Zum Beispiel, nehmen Sie ein Array namens emp, das die Namen der Mitarbeiter enthlt, die durch ihre numerische Mitarbeiternummer indiziert sind. So wre emp[0] Mitarbeiter Nummer null, emp[1] Mitarbeiter Nummer eins und so weiter.

JavaScript hat keinen expliziten Array-Datentyp. Sie knnen jedoch das vordefinierte Array-Objekt und dessen Methoden verwenden, um mit Arrays in Ihren Anwendungen zu arbeiten. Das Array-Objekt verfgt ber Methoden, um Arrays auf verschiedene Arten zu manipulieren, wie beispielsweise sie zu verbinden, umzukehren und zu sortieren. Es hat eine Eigenschaft zur Bestimmung der Array-Lnge und andere Eigenschaften zur Verwendung mit regulren Ausdrcken.

Wir werden uns in diesem Artikel auf Arrays konzentrieren, aber viele der gleichen Konzepte gelten auch fr typisierte Arrays, da Arrays und typisierte Arrays viele hnliche Methoden teilen. Weitere Informationen zu typisierten Arrays finden Sie im Leitfaden zu typisierten Arrays.

In diesem Artikel

Erstellen eines Arrays

Die folgenden Aussagen erstellen gleichwertige Arrays:

js
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 fr die Elemente des Arrays. Wenn diese Werte angegeben werden, wird das Array mit ihnen als Array-Elementen initialisiert. Die length-Eigenschaft des Arrays wird auf die Anzahl der Argumente gesetzt.

Die Klammer-Syntax wird als "Array-Literal" oder "Array-Initializer" bezeichnet. Sie ist krzer als andere Formen der Erstellung von Arrays und wird daher im Allgemeinen bevorzugt. Details finden Sie unter Array-Literals.

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

js
// This...
const arr1 = new Array(arrayLength);

//  results in the same array as this
const arr2 = Array(arrayLength);

// This has exactly the same effect
const arr3 = [];
arr3.length = arrayLength;

Hinweis: Im obigen Code muss arrayLength eine Number sein. Andernfalls wird ein Array mit einem einzigen Element (dem angegebenen Wert) erstellt. Der Aufruf von arr.length wird arrayLength zurckgeben, aber das Array enthlt keine Elemente. Eine for...in-Schleife wird keine Eigenschaft im Array finden.

Zustzlich zu einer wie oben definierten neuen Variablen knnen Arrays auch als Eigenschaft eines neuen oder eines bestehenden Objekts zugewiesen werden:

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

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

Wenn Sie ein Array mit einem einzelnen Element initialisieren mchten und das Element eine Number ist, mssen Sie die Klammer-Syntax verwenden. Wenn ein einzelner Number-Wert an den Array()-Konstruktor oder die Funktion bergeben wird, wird er als arrayLength interpretiert und nicht als einzelnes Element.

Dies erstellt ein Array mit nur einem Element: die Zahl 42.

js
const arr = [42];

Dies erstellt ein Array ohne Elemente und arr.length ist auf 42 gesetzt.

js
const arr = Array(42);

Dies entspricht:

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

Der Aufruf von Array(N) fhrt zu einem RangeError, wenn N eine nicht-ganzzahlige Zahl ist, deren Bruchteil ungleich null ist. Das folgende Beispiel veranschaulicht dieses Verhalten.

js
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 erstellen Sie zuerst ein leeres Array, bevor Sie das einzelne Element hinzufgen.

Sie knnen auch die statische Methode Array.of verwenden, um Arrays mit einem einzelnen Element zu erstellen.

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

Zugriff auf Array-Elemente

Da Elemente auch Eigenschaften sind, knnen Sie auf sie mit Eigenschafts-Accessoren zugreifen. Angenommen, Sie definieren das folgende Array:

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

Sie knnen auf das erste Element des Arrays als myArray[0] und auf das zweite Element des Arrays als myArray[1] usw. verweisen. Der Index der Elemente beginnt bei null.

Hinweis: Sie knnen auch Eigenschafts-Accessoren verwenden, um auf andere Eigenschaften des Arrays zuzugreifen, hnlich wie bei einem Objekt.

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

Befllen eines Arrays

Sie knnen ein Array befllen, indem Sie seinen Elementen Werte zuweisen. Beispielsweise:

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

Hinweis: Wenn Sie einen nicht-ganzzahligen Wert auf den Array-Operator im obigen Code anwenden, wird eine Eigenschaft im Objekt erstellt, das das Array darstellt, anstatt ein Array-Element.

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

Sie knnen ein Array auch beim Erstellen befllen:

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

Verstndnis von length

Auf Implementierungsebene speichert JavaScript Arrays ihre Elemente tatschlich als Standardobjekteigenschaften, wobei der Array-Index als Eigenschaftsname verwendet wird.

Die length-Eigenschaft ist besonders. Ihr Wert ist immer eine positive ganze Zahl, die grer ist als der Index des letzten Elements, falls eines existiert. (Im untenstehenden Beispiel wird 'Dusty' bei 30 indiziert, daher gibt cats.length 30 + 1 zurck).

Denken Sie daran, JavaScript Array-Indizes sind 0-basiert: Sie beginnen bei 0, nicht bei 1. Das bedeutet, dass die length-Eigenschaft um eins grer ist als der hchste im Array gespeicherte Index:

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

Sie knnen der length-Eigenschaft auch Werte zuweisen.

Wenn Sie einen Wert schreiben, der krzer ist als die Anzahl der gespeicherten Elemente, wird das Array gekrzt. Das Schreiben von 0 leert es vollstndig:

js
const cats = ["Dusty", "Misty", "Twiggy"];
console.log(cats.length); // 3

cats.length = 2;
console.log(cats); // [ 'Dusty', 'Misty' ] - Twiggy has been removed

cats.length = 0;
console.log(cats); // []; the cats array is empty

cats.length = 3;
console.log(cats); // [ <3 empty items> ]

Iteration ber Arrays

Eine hufige Operation ist es, die Elemente eines Arrays zu durchlaufen, um jedes in gewisser Weise zu verarbeiten, wie folgt:

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

Wenn Sie sicher wissen, dass keines der Elemente in Ihrem Array in einem booleanischen Kontext zu false auswertet - wenn Ihr Array zum Beispiel nur DOM-Knoten enthlt - knnen Sie ein effizienteres Idiom verwenden:

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

Dies vermeidet den Overhead der berprfung der Array-Lnge und stellt sicher, dass die div-Variable jedes Mal innerhalb der Schleife auf das aktuelle Element neu zugewiesen wird, was zustzlichen Komfort bietet.

Die Methode forEach() bietet eine weitere Mglichkeit, ber ein Array zu iterieren:

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

Die an forEach bergebene Funktion wird einmal fr jedes Element des Arrays ausgefhrt, wobei das Array-Element als Argument an die Funktion bergeben wird. Nicht zugewiesene Werte werden in einer forEach-Schleife nicht durchlaufen.

Beachten Sie, dass die Elemente eines Arrays, die weggelassen wurden, als das Array definiert wurde, beim Iterieren durch forEach nicht aufgelistet werden, aber werden aufgelistet, wenn undefined manuell dem Element zugewiesen wurde:

js
const sparseArray = ["first", "second", , "fourth"];

sparseArray.forEach((element) => {
  console.log(element);
});
// Logs:
// first
// second
// fourth

if (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 Standardobjekteigenschaften gespeichert werden, ist es nicht ratsam, durch JavaScript-Arrays mit for...in-Schleifen zu iterieren, da normale Elemente und alle aufgelisteten Eigenschaften aufgefhrt werden.

Array-Methoden

Das Array-Objekt hat die folgenden Methoden:

Die Methode concat() verbindet zwei oder mehr Arrays und gibt ein neues Array zurck.

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

Die Methode join() verbindet alle Elemente eines Arrays zu einem String.

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

Die Methode push() fgt ein oder mehrere Elemente an das Ende eines Arrays hinzu und gibt die resultierende length des Arrays zurck.

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

Die Methode pop() entfernt das letzte Element aus einem Array und gibt dieses Element zurck.

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

Die Methode shift() entfernt das erste Element aus einem Array und gibt dieses Element zurck.

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

Die Methode unshift() fgt ein oder mehrere Elemente an den Anfang eines Arrays hinzu und gibt die neue Lnge des Arrays zurck.

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

Die Methode slice() extrahiert einen Abschnitt eines Arrays und gibt ein neues Array zurck.

js
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

Die Methode at() gibt das Element am angegebenen Index im Array zurck oder undefined, wenn der Index auerhalb des Bereichs liegt. Sie wird insbesondere fr negative Indizes verwendet, die auf Elemente vom Ende des Arrays zugreifen.

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

Die Methode splice() entfernt Elemente aus einem Array und ersetzt diese (optional). Sie gibt die Elemente zurck, die aus dem Array entfernt wurden.

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

Die Methode reverse() transponiert die Elemente eines Arrays an ihrem Platz: Das erste Array-Element wird das letzte und das letzte wird das erste. Sie gibt eine Referenz auf das Array zurck.

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

Die Methode flat() gibt ein neues Array zurck, in dem alle Unter-Array-Elemente bis zur angegebenen Tiefe rekursiv verbunden werden.

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

Die Methode sort() sortiert die Elemente eines Arrays an ihrem Platz und gibt eine Referenz auf das Array zurck.

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

sort() kann auch eine Rckruffunktion annehmen, um zu bestimmen, wie Array-Elemente verglichen werden. Die Rckruffunktion 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 zurck, was die Reihenfolge der beiden Werte angibt. Zum Beispiel wird das folgende Array nach dem letzten Buchstaben eines Strings sortiert:

js
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"]
  • wenn a nach dem Sortierungssystem kleiner als b ist, dann geben Sie -1 (oder irgendeine negative Zahl) zurck
  • wenn a nach dem Sortierungssystem grer als b ist, dann geben Sie 1 (oder irgendeine positive Zahl) zurck
  • wenn a und b als gleichwertig angesehen werden, geben Sie 0 zurck.

Die Methode indexOf() durchsucht das Array nach searchElement und gibt den Index des ersten Treffers zurck.

js
const a = ["a", "b", "a", "b", "a"];
console.log(a.indexOf("b")); // 1

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

Die Methode lastIndexOf() funktioniert wie indexOf, beginnt jedoch am Ende und sucht rckwrts.

js
const a = ["a", "b", "c", "d", "a", "b"];
console.log(a.lastIndexOf("b")); // 5

// Now try again, starting from before the last match
console.log(a.lastIndexOf("b", 4)); // 1
console.log(a.lastIndexOf("z")); // -1

Die Methode forEach() fhrt callback fr jedes Array-Element aus und gibt undefined zurck.

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

Die forEach-Methode (und die folgenden) die einen Rckruf annehmen, sind als iterative Methoden bekannt, da sie in gewisser Weise ber das gesamte Array iterieren. Jede nimmt ein optionales zweites Argument namens thisArg. Wenn bergeben, wird thisArg der Wert des this-Schlsselworts innerhalb des Rumpfen der Rckruffunktion. Wenn nicht angegeben, wie in anderen Fllen, in denen eine Funktion auerhalb eines expliziten Objektkontexts aufgerufen wird, wird this auf das globale Objekt (window, globalThis, etc.) verweisen, wenn die Funktion nicht strict ist, oder undefined, wenn die Funktion strict ist.

Hinweis: Die oben eingefhrte Methode sort() ist keine iterative Methode, da ihre Rckruffunktion nur fr den Vergleich verwendet wird und mglicherweise nicht in einer bestimmten Reihenfolge basierend auf der Elementreihenfolge aufgerufen wird. sort() nimmt auch nicht den thisArg Parameter an.

Die Methode map() gibt ein neues Array zurck, das den Rckgabewert jeder Ausfhrung von callback ber jedes Array-Element enthlt.

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

Die Methode flatMap() fhrt map() gefolgt von einer flat()-Operation der Tiefe 1 aus.

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

Die Methode filter() gibt ein neues Array zurck, das die Elemente enthlt, fr die callback true zurckgegeben hat.

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

Die Methode find() gibt das erste Element zurck, fr das callback true zurckgegeben hat.

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

Die Methode findLast() gibt das letzte Element zurck, fr das callback true zurckgegeben hat.

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

Die Methode findIndex() gibt den Index des ersten Elements zurck, fr das callback true zurckgegeben hat.

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

Die Methode findLastIndex() gibt den Index des letzten Elements zurck, fr das callback true zurckgegeben hat.

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

Die Methode every() gibt true zurck, wenn callback fr jedes Element im Array true zurckgibt.

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

Die Methode some() gibt true zurck, wenn callback fr mindestens ein Element im Array true zurckgibt.

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

Die Methode reduce() wendet callback(accumulator, currentValue, currentIndex, array) auf jeden Wert im Array an, um die Liste der Elemente auf einen einzelnen Wert zu reduzieren. Die reduce-Funktion gibt den letzten Wert zurck, der von der callback Funktion zurckgegeben wird.

Wenn initialValue angegeben ist, wird callback mit initialValue als erstem Parameterwert und dem Wert des ersten Elements im Array als zweitem Parameterwert aufgerufen.

Wenn initialValue nicht angegeben wird, sind die ersten beiden Parameterwerte von callback die ersten und zweiten Elemente des Arrays. Bei jedem folgenden Aufruf wird der Wert des ersten Parameters der sein, den callback beim vorherigen Aufruf zurckgegeben hat, und der zweite Parameterwert wird der nchste Wert im Array sein.

Falls callback Zugriff auf den Index des bearbeiteten Elements oder Zugriff auf das gesamte Array bentigt, stehen diese als optionale Parameter zur Verfgung.

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

Die Methode reduceRight() funktioniert wie reduce(), beginnt jedoch mit dem letzten Element.

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

Array-Transformationen

Sie knnen zwischen Arrays und anderen Datenstrukturen hin- und her-transformieren.

Gruppierung der Elemente eines Arrays

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

Hier haben wir ein Inventar-Array, das "Lebensmittel"-Objekte enthlt, die einen name und einen type haben.

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

Um Object.groupBy() zu verwenden, geben Sie eine Rckruffunktion an, die mit dem aktuellen Element (und optional dem aktuellen Index und dem Array) aufgerufen wird und einen String zurckgibt, der die Gruppe des Elements angibt.

Der folgende Code verwendet eine Pfeilfunktion, um den type jedes Array-Elements zurckzugeben (dabei wird die Objekt-Destrukturierungs-Syntax fr Funktionsargumente verwendet, um das type-Element aus dem bergebenen Objekt zu entpacken). Das Ergebnis ist ein Objekt, das Eigenschaften hat, die nach den eindeutigen Strings benannt sind, die von der Rckruffunktion zurckgegeben werden. Jede Eigenschaft erhlt ein Array, das die Elemente der Gruppe enthlt.

js
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' }
//   ]
// }

Beachten Sie, dass das zurckgegebene Objekt die gleichen Elemente wie das Original-Array referenziert (keine Deep Copies). Eine nderung der internen Struktur dieser Elemente wird sowohl im Original-Array als auch im zurckgegebenen Objekt reflektiert.

Wenn Sie keinen String als Schlssel verwenden knnen, zum Beispiel, wenn die Information, nach der gruppiert wird, mit einem Objekt verknpft ist, das sich ndern knnte, dann knnen Sie stattdessen Map.groupBy() verwenden. Dies ist sehr hnlich zu Object.groupBy(), auer dass es die Elemente des Arrays in einer Map gruppiert, die einen beliebigen Wert (Objekt oder Primitiv) als Schlssel verwenden kann.

Sparse Arrays

Arrays knnen "leere Felder" enthalten, die nicht gleich Feldern mit dem Wert undefined sind. Leere Felder knnen auf eine der folgenden Arten erstellt werden:

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

Bei einigen Operationen verhalten sich leere Felder so, als wren sie mit undefined gefllt.

js
const arr = [1, 2, , , 5]; // Create a sparse array

// Indexed access
console.log(arr[2]); // undefined

// For...of
for (const i of arr) {
  console.log(i);
}
// Logs: 1 2 undefined undefined 5

// Spreading
const another = [...arr]; // "another" is [ 1, 2, undefined, undefined, 5 ]

Bei anderen (insbesondere iterativen Array-Methoden) werden leere Felder bersprungen.

js
const mapped = arr.map((i) => i + 1); // [ 2, 3, <2 empty items>, 6 ]
arr.forEach((i) => console.log(i)); // 1 2 5
const filtered = arr.filter(() => true); // [ 1, 2, 5 ]
const hasFalsy = arr.some((k) => !k); // false

// Property enumeration
const 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 iterator
const objectSpread = { ...arr }; // { '0': 1, '1': 2, '4': 5 }

Fr eine vollstndige Liste, wie sich Array-Methoden mit Sparse Arrays verhalten, siehe die Array-Referenzseite.

Mehrdimensionale Arrays

Arrays knnen geschachtelt werden, das bedeutet, dass ein Array ein anderes Array als Element enthalten kann. Mithilfe dieser Eigenschaft von JavaScript-Arrays knnen mehrdimensionale Arrays erstellt werden.

Der folgende Code erstellt ein zweidimensionales Array.

js
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 zur Speicherung anderer Eigenschaften verwenden

Arrays knnen auch wie Objekte verwendet werden, um verwandte Informationen zu speichern.

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

Zum Beispiel, wenn ein Array das Ergebnis einer bereinstimmung zwischen einem regulren Ausdruck und einem String ist, gibt das Array Eigenschaften und Elemente zurck, die Informationen ber die bereinstimmung bieten. Ein Array ist der Rckgabewert von RegExp.prototype.exec(), String.prototype.match() und String.prototype.split(). Informationen zur Verwendung von Arrays mit regulren Ausdrcken finden Sie unter Regulre Ausdrcke.

Arbeiten mit Array-hnlichen Objekten

Einige JavaScript-Objekte, wie die NodeList, die von document.getElementsByTagName() zurckgegeben werden, oder das arguments-Objekt, das im Krper einer Funktion verfgbar ist, sehen und verhalten sich oberflchlich wie Arrays, teilen jedoch nicht alle ihre Methoden. Das arguments-Objekt bietet ein length-Attribut, implementiert jedoch keine Array-Methoden wie forEach().

Array-Methoden knnen nicht direkt auf array-hnliche Objekte aufgerufen werden.

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

Aber Sie knnen sie indirekt mit Function.prototype.call() aufrufen.

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

Array-Prototyp-Methoden knnen auch auf Strings angewendet werden, da sie einen sequentiellen Zugriff auf ihre Zeichen in hnlicher Weise wie Arrays bieten:

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

Web Proxy Viewer  |  New URL  |  Original Page