Wie man Array-Methoden in JavaScript verwendet: Iterationsmethoden

Einführung

In JavaScript besteht der Array-Datentyp aus einer Liste von Elementen. Es gibt viele nützliche integrierte Methoden, die JavaScript-Entwicklern zur Verfügung stehen, um mit Arrays zu arbeiten. Methoden, die das ursprüngliche Array ändern, werden als Mutator-Methoden bezeichnet, und Methoden, die einen neuen Wert oder eine neue Repräsentation zurückgeben, werden als Accessor-Methoden bezeichnet.

Es gibt eine dritte Klasse von Array-Methoden, die als Iterations-Methoden bekannt sind und Methoden sind, die nacheinander auf jedes Element in einem Array angewendet werden. Diese Methoden sind eng mit Schleifen verbunden. In diesem Tutorial konzentrieren wir uns auf Iterationsmethoden.

Um das Beste aus diesem Tutorial herauszuholen, sollten Sie mit dem Erstellen, Indizieren, Modifizieren und Durchlaufen von Arrays vertraut sein, was Sie im Tutorial Arrays in JavaScript verstehen nachlesen können.

In diesem Tutorial verwenden wir Iterationsmethoden, um Arrays zu durchlaufen, Funktionen für jedes Element in einem Array auszuführen, die gewünschten Ergebnisse eines Arrays zu filtern, Array-Elemente auf einen einzigen Wert zu reduzieren und in Arrays nach Werten oder Indizes zu suchen.

Verständnis von Pfeilfunktionen

Viele Beispiele in diesem Tutorial verwenden JavaScript-Pfeilfunktionsausdrücke, die durch ein Gleichheitszeichen gefolgt von einem Größer-als-Zeichen dargestellt werden: =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // auszuführender Code
}

example();

In der neuesten Version von JavaScript zum Zeitpunkt des Schreibens können Pfeilfunktionen verwendet werden, die mit der folgenden Syntax geschrieben werden können:

var example = () => {
  // auszuführender Code
}

example();

Die Klammern in beiden Fällen können Parameter enthalten. Wenn es nur einen Parameter gibt, können die Klammern weggelassen werden, wie folgt:

var example = parameter1 => {
  // auszuführender Code
}

Im Verlauf der Beispiele in diesem Tutorial werden wir die Pfeilfunktionssyntax verwenden. Um mehr über Funktionen in JavaScript zu lesen und zu verstehen, lesen Sie die Funktionsreferenz auf dem Mozilla Developer Network.

forEach()

Die forEach()-Methode ruft eine Funktion für jedes Element in einem Array auf.

Fangen wir mit dem folgenden Array an, das der Variablen fish zugewiesen ist:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

Wir können forEach() verwenden, um jedes Element im Array fish in der Konsole auszugeben.

// Gib jedes Element im Array aus
fish.forEach(individualFish => {
	console.log(individualFish);
})

Nachdem wir das getan haben, erhalten wir die folgende Ausgabe:

Output
piranha
barracuda
cod
eel

Eine weitere Möglichkeit, dies zu tun, besteht darin, das for-Schleifen-Schlüsselwort zu verwenden und es mit der Längeneigenschaft des Arrays zu überprüfen.

// Schleife durch die Länge des Arrays
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

Der obige Code hat dieselbe Ausgabe wie die Verwendung der forEach()-Methode. Als Iterationsmethode, die speziell für die Verwendung mit Arrays vorgesehen ist, ist forEach() für diese spezielle Aufgabe kürzer und einfacher.

map()

Die Methode map() erstellt ein neues Array mit den Ergebnissen eines Funktionsaufrufs für jedes Element im Array.

Um zu zeigen, wie man die Iterationsmethode map() verwendet, können wir jede Iteration einer Schleife in die Konsole drucken. map() verändert das ursprüngliche Array nicht, sondern gibt stattdessen einen neuen Array-Wert zurück.

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Gibt jedes Element im Array aus
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

Wir können auch map() verwenden, um die Werte jedes Elements in einem Array zu ändern. Um dies zu demonstrieren, fügen wir jedem Element im Array fish ein s am Ende hinzu, um jedes Wort zu pluralisieren.

// Pluralisiert alle Elemente im fish-Array
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

Die ursprüngliche fish-Variable bleibt unverändert, aber pluralFish enthält jetzt eine modifizierte Version der ursprünglichen Variable.

filter()

Die Methode filter() erstellt ein neues Array mit den Elementen, die das Ergebnis eines bestimmten Tests bestehen.

Wir könnten filter() verwenden, um ein neues Array zurückzugeben, das nur die Elemente in einer Liste enthält, die mit einem bestimmten Buchstaben beginnen. Dazu können wir die Zeichenkettenindizierung nutzen, um das erste Element (oder den ersten Buchstaben) in jedem Zeichenkettenelement des Arrays aufzurufen.

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Filtern Sie alle Kreaturen, die mit "s" beginnen, in eine neue Liste
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

Wir haben getestet, welche Elemente im Array ein s an der Stelle 0 haben, und das Ergebnis einer neuen Variablen zugewiesen.

filter() ist eine Iterationsmethode und verändert das ursprüngliche Array nicht.

reduce()

Die Methode reduce() reduziert ein Array auf einen einzelnen Wert.

Dies wird häufig bei Zahlen verwendet, wie zum Beispiel beim Ermitteln der Summe aller Zahlen in einem Array.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Erhalten Sie die Summe aller numerischen Werte
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce() kann auch mit Zeichenketten und anderen Datentypen verwendet werden. Der Wert, der von reduce() zurückgegeben wird, kann eine Zahl, Zeichenkette, ein Array oder ein anderer Datentyp sein. reduce() ist eine Iterationsmethode, die das ursprüngliche Array nicht verändert.

find()

Die Methode find() gibt den ersten Wert in einem Array zurück, der einen bestimmten Test besteht.

Als Beispiel erstellen wir ein Array von Meerestieren.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Dann verwenden wir die Methode find(), um zu testen, ob eines der Tiere im Array Kopffüßer sind.

// Überprüfen, ob ein bestimmter Wert ein Kopffüßer ist
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

Da Oktopus der erste Eintrag im Array war, der den Test in der Funktion isCephalopod() erfüllte, wird er als erster Wert zurückgegeben.

Die Methode find() kann Ihnen helfen, mit Arrays zu arbeiten, die viele Werte enthalten.

findIndex()

Die Methode findIndex() gibt den ersten Index in einem Array zurück, der einen bestimmten Test besteht.

Wir können das gleiche Beispiel mit seaCreatures wie bei der Methode find() verwenden.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Unter Verwendung des Tests isCephalopod finden wir statt des Werts der ersten Übereinstimmung die Indexnummer.

// Überprüfen, ob ein bestimmter Wert ein Kopffüßer ist
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

Oktopus ist der erste Artikel, der den Test erfüllt, und hat einen Index von 1, daher wird die Indexnummer zurückgegeben.

Wenn der Test nicht erfüllt ist, gibt findIndex() -1 zurück.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

Die Methode findIndex() ist besonders nützlich, wenn Sie mit Arrays arbeiten, die viele Elemente enthalten.

Abschluss

In diesem Tutorial haben wir die wichtigsten integrierten Iterations-Array-Methoden in JavaScript überprüft. Iterationsmethoden arbeiten mit jedem Element in einem Array und führen oft eine neue Funktion aus. Wir haben besprochen, wie man Arrays durchläuft, den Wert jedes Elements in einem Array ändert, Arrays filtert und reduziert und Werte und Indizes findet.

Um die Grundlagen von Arrays zu überprüfen, lesen Sie Understanding Arrays in JavaScript. Für weitere Informationen zur Syntax in JavaScript, sehen Sie unser Tutorial über “Understanding Syntax and Code Structure in JavaScript.”