Was sind Arrays?

Arrays sind eine Datenstruktur, die eine geordnete Sammlung von Elementen speichert. In JavaScript werden Arrays als spezielle Objekttypen klassifiziert und können Zahlen, Zeichenfolgen, Objekte oder andere Arrays speichern. Elemente in einem Array werden in eckige Klammern [] eingeschlossen und verwenden einen auf Null basierenden Index. Ein auf Null basierender Index bedeutet, dass das erste Element eines Arrays einen Index von 0 hat, das zweite Element einen Index von 1 und so weiter.

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"

Wie können Arrays geändert oder manipuliert werden?

Index des Elements in einem Array

Ein neues Element kann zu einem Array hinzugefügt werden, indem einem leeren Index ein Wert zugewiesen wird.

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]

Elemente in einem Array können geändert werden, indem einem vorhandenen Index ein neuer Wert zugewiesen wird.

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

Array-Methoden

Arrays können auch mit Array-Methoden wie „Push“, „Pop“, „Unshift“, „Shift“, „Slice“ und „Splice“ geändert oder manipuliert werden.

'drücken()'

Die Methode „push“ nimmt ein oder mehrere Elemente als Argumente, fügt die Elemente am Ende des Arrays hinzu und gibt die Länge des geänderten Arrays zurück.

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]

'Pop()'

Die Methode „pop“ akzeptiert keine Argumente, entfernt das letzte Element des Arrays und gibt das entfernte Element zurück.

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

'unshift()'

Die Methode „unshift“ nimmt ein oder mehrere Elemente als Argumente, fügt die Elemente am Anfang des Arrays hinzu und gibt die Länge des geänderten Arrays zurück.

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]

'Schicht()'

Die Methode „shift“ akzeptiert keine Argumente, entfernt das erste Element eines Arrays und gibt das entfernte Element zurück.

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'Scheibe()'

Die Methode „slice“ verwendet zwei optionale Argumente (startIndex, endIndex) und gibt ein neues Array mit den Elementen vom startIndex bis zum endIndex des ursprünglichen Arrays zurück, jedoch nicht einschließlich.
Wenn der startIndex weggelassen wird, wird 0 verwendet.
Wenn der endIndex weggelassen wird, wird die Array-Länge verwendet. Negative Indexzahlen können verwendet werden, um vom Ende des Arrays rückwärts zu zählen.

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'spleißen()'

Die Methode „splice“ akzeptiert ein oder mehrere Argumente (startIndex, deleteCount, element1, element2, ...) und gibt ein neues Array zurück, das alle entfernten Elemente enthält. Aus dem startIndex wird die Anzahl der Elemente in deleteCount gelöscht und die folgenden Elementargumente werden dem Array beginnend mit dem startIndex hinzugefügt. Wenn deleteCount weggelassen wird, werden alle Elemente von startIndex bis zum Ende des Arrays gelöscht. Wenn Elementargumente weggelassen werden, werden keine Elemente hinzugefügt.

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]

Da „Push“, „Pop“, „Unshift“, „Shift“ und „Splice“ das ursprüngliche Array verändern, werden sie als destruktive Methoden klassifiziert. Die „Slice“-Methode lässt das ursprüngliche Array intakt und wird daher als nicht destruktiv eingestuft.

Spread-Operator '...'

Um Elemente zerstörungsfrei zu einem Array hinzuzufügen oder es zu kopieren, kann der Spread-Operator verwendet werden. Der Spread-Operator verteilt ein Array in seine Elemente.

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]

Ohne den Spread-Operator würde das ursprüngliche Array im neuen Array verschachtelt sein.

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];

Iterative Array-Methoden

Iterative Array-Methoden rufen eine bereitgestellte Funktion für jedes Element in einem Array auf und geben einen Wert oder ein neues Array zurück. Die bereitgestellte Funktion wird mit drei Argumenten aufgerufen: dem aktuellen Element, dem Index des aktuellen Elements und dem ursprünglichen Array, für das die Methode aufgerufen wurde.

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}

Einige Beispiele für iterative Array-Methoden sind: „find“, „filter“, „map“ und „reduce“.

'finden()'

Die Methode „find“ verwendet eine Funktion als Argument und gibt das erste Element im Array zurück, das die Bedingungen der Funktion erfüllt.

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;

'Filter()'

Die Methode „filter“ ähnelt der Methode „find“, gibt jedoch stattdessen ein Array aller Elemente zurück, die die Bedingungen der angegebenen Funktion erfüllen.

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];

'Karte()'

Die Methode „map“ gibt ein neues Array mit den Ergebnissen des Funktionsaufrufs für jedes Element im ursprünglichen Array zurück.

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]

'reduzieren()'

Die Methode „reduce“ akzeptiert eine Funktion und einen Anfangswert als Argument. Die bereitgestellte Funktion empfängt vier Argumente: den Akkumulator, den aktuellen Wert, den aktuellen Index und das ursprüngliche Array. Der bereitgestellte Anfangswert ist der Wert des Akkumulators für das erste Element des Arrays. Das Ergebnis der Funktion für jedes Element wird als Wert des Akkumulators für das nächste Element im Array verwendet. Wenn kein Anfangswert angegeben wird, wird der Akkumulator auf das erste Element des Arrays gesetzt und die Callback-Funktion wird ab dem zweiten Element aufgerufen.

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc   number), 0);
// returns 15