In JavaScript hat die Array-Klasse viele leistungsstarke eingebaute Methoden zum Transformieren von Arrays.
Diese Methoden machen es viel einfacher, ein Array in ein anderes umzuwandeln, als es mit einer einfachen for-Schleife oder direkter Manipulation der Fall wäre.
Einige Methoden sind rein, das heißt, sie verändern das ursprüngliche Array nicht.
Stattdessen geben sie ein neues zurück.
Andere Methoden dagegen verändern das Array, auf dem sie aufgerufen werden, und geben das veränderte Array nicht zurück.
Im Folgenden werden einige der am häufigsten verwendeten Methoden zum Transformieren von Arrays vorgestellt.
Eine vollständige Liste der verfügbaren Methoden findest du in der MDN-Dokumentation.
map (rein)
Erzeugt ein neues Array, indem jedes Element gemäß einer als Argument übergebenen Funktion transformiert wird.
Diese Callback-Funktionen werden oft als Arrow-Funktionen geschrieben.
let arr = [1, 2, 3, 4];
const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]
Beachte, dass das resultierende Array immer dieselbe Länge wie das ursprüngliche hat.
filter (rein)
Erzeugt ein Array, indem das aktuelle gefiltert wird, wobei eine Filterfunktion angegeben wird (die wahr zurückgibt, wenn das Element behalten werden soll, und falsch, wenn es entfernt werden soll).
let arr = [1, 2, 3, 4];
arr.filter((value) => value % 2 === 0);
// => [2, 4]
reduce (rein)
Reduziert das Array mithilfe einer Funktion auf einen einzelnen Wert.
Diese Funktion nimmt einen Akkumulator und das aktuelle Element des Arrays als Parameter.
Sie legt fest, wie das aktuelle Element in den Akkumulator eingefügt werden muss, und gibt den Akkumulator zurück, der in der nächsten Iteration verwendet wird.
let arr = [1, 2, 3, 4];
// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10
// Classify the numbers by whether they are odd or not
arr.reduce(
(accumulator, currentValue) => {
if (currentValue % 2 === 0) {
accumulator.even.push(currentValue);
} else {
accumulator.odd.push(currentValue);
}
return accumulator;
},
{ even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }
reverse
Kehrt die Elemente eines Arrays um.
const arr = [1, 2, 3, 4];
arr.reverse();
// => [4, 3, 2, 1]
Diese Methode verändert das Array, auf dem sie aufgerufen wird.
slice (rein)
Erzeugt aus dem als Parameter übergebenen Array ein Teil-Array, wenn ein Start- und ein Endindex angegeben werden.
Das Element am Endindex wird nicht eingeschlossen.
Außerdem sind alle Parameter optional:
Der Startindex ist standardmäßig 0, und der Endindex ist standardmäßig die Länge des Arrays.
const arr = [1, 2, 3, 4];
arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]
splice
Entfernt oder ersetzt Elemente eines Arrays und/oder fügt neue hinzu.
Sie nimmt die folgenden Parameter:
- den Index des Elements, an dem die Änderung des Arrays beginnen soll
- die Anzahl der zu löschenden Elemente
- die Elemente, die in das Array eingefügt werden sollen (optional)
splice gibt die Elemente zurück, die entfernt wurden.
const arr = ['1', '2', '5', '6'];
// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']
// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']
// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']
sort
Standardmäßig sortiert sort die Elemente eines Arrays, indem es sie zuerst in Strings umwandelt und dann einen String-Vergleich anwendet (siehe das Konzept „Vergleich“).
Das Sortieren geschieht in-place, was bedeutet, dass das ursprüngliche Array verändert wird.
sort gibt außerdem das veränderte Array zurück, was praktisch ist, wenn du weitere Methoden daran verketten möchtest.
const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']
Um das Sortierverhalten anzupassen, kannst du eine Vergleichsfunktion als Argument übergeben.
Die Vergleichsfunktion selbst wird mit zwei Argumenten aufgerufen, bei denen es sich um zwei Elemente des Arrays handelt.
Sie muss dann Folgendes zurückgeben:
- eine negative Zahl, wenn das erste Argument vor dem zweiten einsortiert werden soll
- eine positive Zahl, wenn das erste Argument nach dem zweiten einsortiert werden soll
-
0, wenn die Reihenfolge der Elemente gleich bleiben soll
Hier ist ein Beispiel dafür, wie du eine benutzerdefinierte Vergleichsfunktion verwenden kannst, um ein Array von Objekten zu sortieren.
const arr = [
{ name: 'Lydia', age: 7 },
{ name: 'Anne', age: 34 },
{ name: 'Holger', age: 59 },
];
arr.sort((item1, item2) => {
if (item1.name < item2.name) {
return -1;
}
if (item1.name > item2.name) {
return 1;
}
return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]
Lernübung
