Array-Transformationen in

Über Array-Transformationen

In JavaScript hat die Klasse Array viele leistungsstarke eingebaute Methoden, um Arrays umzuwandeln. Diese Methoden machen es viel einfacher, ein Array in ein anderes umzuwandeln, als es mit einer einfachen for-Schleife oder mit direkter Manipulation möglich 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 hingegen verändern das Array, auf dem sie aufgerufen werden, und geben das veränderte Array nicht zurück.

Im Folgenden stellen wir dir einige der am häufigsten verwendeten Methoden zum Umwandeln von Arrays vor. Eine vollständige Liste der verfügbaren Methoden findest du in der MDN-Dokumentation.

map (rein)

Erzeuge ein neues Array, indem du jedes Element mit einer Funktion umwandelst, die als Argument übergeben wird. Diese Callback-Funktionen werden oft als Pfeilfunktionen 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 hat wie das ursprüngliche.

filter (rein)

Erzeugt ein neues Array, indem es das aktuelle mit einer Filterfunktion filtert (die true zurückgibt, wenn das Element behalten werden soll, und false, wenn es entfernt werden soll).

let arr = [1, 2, 3, 4];

arr.filter((value) => value % 2 === 0);
// => [2, 4]

reduce (rein)

Reduziert das Array auf einen einzelnen Wert. Dazu verwendet sie eine Funktion, die einen Akkumulator und das aktuelle Element des Arrays als Parameter entgegennimmt. Diese Funktion legt fest, wie das aktuelle Element in den Akkumulator eingefügt werden muss, und liefert den Akkumulator zurück, der bei 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 Reihenfolge der 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 mit einem Start- und einem Endindex ein Teil-Array aus dem Array, auf dem sie aufgerufen wird.

Das Element am Endindex wird nicht mit einbezogen. 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 Elemente eines Arrays oder ersetzt sie und/oder fügt neue hinzu. Sie nimmt die folgenden Parameter entgegen:

• 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 sie sie zuerst in Strings umwandelt und dann einen String-Vergleich durchführt (siehe das Konzept Vergleich). Das Sortieren geschieht in-place, das heißt, das ursprüngliche Array wird verändert. sort gibt außerdem dieses veränderte Array zurück, was praktisch ist, wenn du weitere Methoden daran anhängen 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']

const arr = [3, 1, 2, 10];
arr.sort();
// => [1, 10, 2, 3]
// Because the string '10' comes before '2' in dictionary order.

Um das Sortierverhalten anzupassen, kannst du eine Vergleichsfunktion als Argument übergeben. Diese Vergleichsfunktion wird mit zwei Argumenten aufgerufen, nämlich zwei Elementen des Arrays. Sie muss dann Folgendes zurückgeben:

• eine negative Zahl, wenn das erste Argument vor dem zweiten sortiert werden soll
• eine positive Zahl, wenn das erste Argument nach dem zweiten sortiert werden soll
• 0, wenn die Reihenfolge der Elemente gleich bleiben soll

Damit lässt sich das Problem beim Sortieren von Zahlen beheben, indem du die richtige Vergleichsfunktion übergibst.

const arr = [3, 1, 2, 10];
arr.sort((a, b) => a - b);
// => [1, 2, 3, 10]
// "a - b" is negative when b is greater than a, positive when
// a is greater than b and 0 when they are equal.

Hier ist ein Beispiel, wie du eine eigene 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 } ]

Seit 2019 schreibt die Sprachspezifikation vor, dass die Sortierung stabil sein muss, aber es gibt keine Garantien bezüglich der Performance (Zeit- und Speicherkomplexität).