Arrays - Higher Order Functions

Ziele

• Du kannst ein Array mithilfe von Higher Order Functions filtrieren, deren Elemente umwandeln (map) und sortieren.

Higher Order Functions

map()

Die map() Methode wird verwendet, um eine neue Array-Instanz zu erstellen, indem jeder Wert des ursprünglichen Arrays durch eine bestimmte Funktion transformiert wird. Dabei wird eine neue Array-Instanz erstellt, die die transformierten Werte aufnimmt.

1
2
3
4
5
6

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(function (num) {
  return num * num;
});

console.log(squares); // [1, 4, 9, 16, 25]

filter()

Die Methode filter() wird angewendet, um eine neue Array-Instanz zu erstellen, die nur die Elemente des ursprünglichen Arrays enthält, die bestimmte Kriterien erfüllen (Filtern).

1
2
3
4
5
6

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function (num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

sort()

Die sort()-Methode sortiert die Elemente in einem Array.

Die Standard-Sortierreihenfolge ist alphanumerisch. Das bedeutet, dass die Elemente nach ihrer Unicode-Platzierung sortiert werden.

1
2
3
4

const fruits = ["Banana", "Mango", "Apple", "Orange"];
const sortedFruits = fruits.sort();

console.log(sortedFruits); // ["Apple", "Banana", "Mango", "Orange"]

Die sort()-Funktion kann auch mit einer Vergleichsfunktion verwendet werden, um die Elemente auf andere Weise zu sortieren.

Die Vergleichsfunktion sollte dabei:

• zwei Argumente haben und einen negativen Wert zurückgeben, wenn das erste Argument vor dem zweiten Argument in der Sortierreihenfolge stehen soll,
• einen positiven Wert, wenn das erste Argument nach dem zweiten Argument stehen soll,
• und 0, wenn sie beide gleich zu gewichten sind.

1
2
3
4

const numbers = [10, 5, 20, 3];
numbers.sort((a, b) => a - b);

console.log(numbers); // [3, 5, 10, 20]

includes() (contains)

Die includes()-Funktion wird verwendet, um zu prüfen, ob ein bestimmtes Element in einem Array vorhanden ist oder nicht. Die Funktion gibt true zurück, wenn das Element gefunden wurde, sonst false.

1
2
3
4

const fruits = ["Banana", "Mango", "Apple", "Orange"];
const isAppleInFruits = fruits.includes("Apple");

console.log(isAppleInFruits); // true

includes() kann auch mit einem optionalen zweiten Parameter verwendet werden. Das wäre der Index, der angibt, von welcher Position im Array aus die Suche beginnen soll. Wenn dieser Parameter nicht angegeben wird, beginnt die Suche am Anfang des Arrays.

1
2
3
4

const fruits = ["Banana", "Mango", "Apple", "Orange"];
const isAppleInFruits = fruits.includes("Banana", 2);

console.log(isAppleInFruits); // false

some()

Die Methode some() prüft, ob zumindest ein Element in einem Array die angegebene Kondition erfüllt. Die Funktion gibt true zurück, wenn mindestens ein Element der Kondition entspricht, andernfalls gibt sie false zurück.

1
2
3
4

const fruits = ["Banana", "Mango", "Apple", "Orange"];
const isAppleInFruits = fruits.some((fruit) => fruit === "Apple");

console.log(isAppleInFruits); // true

find()

Die find()-Methode wird verwendet, um das erste Element in einem Array zu finden, welches der angegebenen Kondition entspricht. Die Funktion gibt das gefundene Element zurück, falls eines gefunden wird, andernfalls gibt sie undefined zurück.

1
2
3
4

const fruits = ["Banana", "Mango", "Apple", "Orange"];
const apple = fruits.find((fruit) => fruit === "Apple");

console.log(apple); // 'Apple'

reduce()

Die reduce()-Methode wird verwendet, um das Array auf einen einzigen Wert zu reduzieren. Dabei wird der erste Wert (auch als Accumulator bezeichnet) genommen und mit dem zweiten kombiniert. Das Ergebnis davon ist der neue Accumulator und mit dem nächsten Wert (Wert des dritten Elements) im Array kombiniert. Das geschieht so lange, bis man durch das gesamte Array durchiteriert hat.

Beispiel mit nur Reduktionsfunktion:

1
2
3
4
5
6

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
});

console.log(sum); // 15