JavaScript-Array-Iteration
Array-Iterationsmethoden arbeiten mit jedem Array-Element.
JavaScript-Array forEach()
Die forEach()Methode ruft eine Funktion (eine Callback-Funktion) einmal für jedes Array-Element auf.
Beispiel
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Beachten Sie, dass die Funktion 3 Argumente akzeptiert:
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
Das obige Beispiel verwendet nur den value-Parameter. Das Beispiel kann umgeschrieben werden zu:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
JavaScript-Array map()
Die map()Methode erstellt ein neues Array, indem sie eine Funktion für jedes Array-Element ausführt.
Die map()Methode führt die Funktion nicht für Array-Elemente ohne Werte aus.
Die map()Methode ändert das ursprüngliche Array nicht.
Dieses Beispiel multipliziert jeden Array-Wert mit 2:
Beispiel
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Beachten Sie, dass die Funktion 3 Argumente akzeptiert:
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
Wenn eine Callback-Funktion nur den value-Parameter verwendet, können die Index- und Array-Parameter weggelassen werden:
Beispiel
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
JavaScript-Array-Filter ()
Die filter()Methode erstellt ein neues Array mit Array-Elementen, das einen Test besteht.
Dieses Beispiel erstellt ein neues Array aus Elementen mit einem Wert größer als 18:
Beispiel
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Beachten Sie, dass die Funktion 3 Argumente akzeptiert:
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
Im obigen Beispiel verwendet die Callback-Funktion nicht die Index- und Array-Parameter, sodass sie weggelassen werden können:
Beispiel
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
JavaScript-Array Reduzieren ()
Die reduce()Methode führt eine Funktion für jedes Array-Element aus, um einen einzelnen Wert zu erzeugen (zu reduzieren).
Die reduce()Methode arbeitet im Array von links nach rechts. Siehe auch reduceRight().
Die reduce()Methode reduziert das ursprüngliche Array nicht.
Dieses Beispiel findet die Summe aller Zahlen in einem Array:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Beachten Sie, dass die Funktion 4 Argumente akzeptiert:
- Die Summe (der Anfangswert / zuvor zurückgegebener Wert)
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
Das obige Beispiel verwendet die Index- und Array-Parameter nicht. Es kann umgeschrieben werden zu:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Die reduce()Methode kann einen Anfangswert annehmen:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
JavaScript-Array ReduceRight()
Die reduceRight()Methode führt eine Funktion für jedes Array-Element aus, um einen einzelnen Wert zu erzeugen (zu reduzieren).
Die reduceRight()Arbeiten von rechts nach links in der Reihe. Siehe auch reduce().
Die reduceRight()Methode reduziert das ursprüngliche Array nicht.
Dieses Beispiel findet die Summe aller Zahlen in einem Array:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Beachten Sie, dass die Funktion 4 Argumente akzeptiert:
- Die Summe (der Anfangswert / zuvor zurückgegebener Wert)
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
Das obige Beispiel verwendet die Index- und Array-Parameter nicht. Es kann umgeschrieben werden zu:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
JavaScript-Array every()
Die every()Methode prüft, ob alle Array-Werte einen Test bestehen.
Dieses Beispiel prüft, ob alle Array-Werte größer als 18 sind:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Beachten Sie, dass die Funktion 3 Argumente akzeptiert:
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
Wenn eine Callback-Funktion nur den ersten Parameter (Wert) verwendet, können die anderen Parameter weggelassen werden:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
JavaScript-Array some()
Die some()Methode prüft, ob einige Array-Werte einen Test bestehen.
Dieses Beispiel prüft, ob einige Array-Werte größer als 18 sind:
Beispiel
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Beachten Sie, dass die Funktion 3 Argumente akzeptiert:
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
JavaScript-Array indexOf()
Die indexOf()Methode durchsucht ein Array nach einem Elementwert und gibt seine Position zurück.
Hinweis: Das erste Element hat Position 0, das zweite Element hat Position 1 und so weiter.
Beispiel
Durchsuchen Sie ein Array nach dem Element „Apple“:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Syntax
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf() gibt -1 zurück, wenn das Element nicht gefunden wird.
Wenn das Element mehr als einmal vorhanden ist, wird die Position des ersten Vorkommens zurückgegeben.
JavaScript-Array lastIndexOf()
Array.lastIndexOf()ist dasselbe wie Array.indexOf(), gibt aber die Position des letzten Vorkommens des angegebenen Elements zurück.
Beispiel
Durchsuchen Sie ein Array nach dem Element „Apple“:
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Syntax
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
JavaScript-Array find()
Die find()Methode gibt den Wert des ersten Array-Elements zurück, das eine Testfunktion besteht.
Dieses Beispiel findet (gibt den Wert zurück) das erste Element, das größer als 18 ist:
Beispiel
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Beachten Sie, dass die Funktion 3 Argumente akzeptiert:
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
Browser-Unterstützung
find()ist eine ES6-Funktion (JavaScript 2015).
Es wird in allen modernen Browsern unterstützt:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find()wird im Internet Explorer nicht unterstützt.
JavaScript-Array findIndex()
Die findIndex()Methode gibt den Index des ersten Array-Elements zurück, das eine Testfunktion besteht.
Dieses Beispiel findet den Index des ersten Elements, das größer als 18 ist:
Beispiel
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Beachten Sie, dass die Funktion 3 Argumente akzeptiert:
- Der Artikelwert
- Der Artikelindex
- Das Array selbst
Browser-Unterstützung
findIndex()ist eine ES6-Funktion (JavaScript 2015).
Es wird in allen modernen Browsern unterstützt:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex()wird im Internet Explorer nicht unterstützt.
JavaScript-Array.from()
Die Array.from()Methode gibt ein Array-Objekt von jedem Objekt mit einer Längeneigenschaft oder einem beliebigen iterierbaren Objekt zurück.
Beispiel
Erstellen Sie ein Array aus einem String:
Array.from("ABCDEFG");
Browser-Unterstützung
from()ist eine ES6-Funktion (JavaScript 2015).
Es wird in allen modernen Browsern unterstützt:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from()wird im Internet Explorer nicht unterstützt.
JavaScript-Array-Schlüssel ()
Die Array.keys()Methode gibt ein Array-Iterator-Objekt mit den Schlüsseln eines Arrays zurück.
Beispiel
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.