Verwendung von Array-Methoden in JavaScript: Iterationsmethoden

Einführung

In JavaScript besteht der Datentyp array aus einer Liste von Elementen. Es gibt viele nützliche integrierte Methoden, mit denen JavaScript-Entwickler mit Arrays arbeiten können. Methoden, die das ursprüngliche Array ändern, werden als mutator methods bezeichnet Rückgabe eines neuen Werts oder einer neuen Darstellung werden als accessor methods bezeichnet.

Es gibt eine dritte Klasse von Array-Methoden, die als * Iterations * -Methoden bezeichnet werden. Dabei handelt es sich um Methoden, die nacheinander für jedes Element in einem Array ausgeführt werden. Diese Methoden sind eng mit Schleifen verbunden. In diesem Tutorial konzentrieren wir uns auf Iterationsmethoden.

Um dieses Lernprogramm optimal nutzen zu können, sollten Sie mit dem Erstellen, Indizieren, Ändern und Durchlaufen von Arrays vertraut sein, die Sie im Lernprogramm https://www.digitalocean.com/community/tutorials/understanding nachlesen können -arrays-in-Javascript [Grundlegendes zu Arrays in JavaScript].

In diesem Lernprogramm 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 einzelnen Wert zu reduzieren und Arrays nach Werten oder Indizes zu durchsuchen.

Grundlegendes zu Pfeilfunktionen

Viele Beispiele in diesem Tutorial verwenden JavaScript Pfeilfunktionsausdrücke, die durch ein Gleichheitszeichen gefolgt von einem dargestellt werden Größer als Vorzeichen: + ⇒ +.

Eine * Funktion * ist ein Block von wiederverwendbarem Code, der ausgeführt werden kann. Traditionell kann eine Funktion mit folgender Syntax geschrieben werden:

var example = function() {
 // code to execute
}

example();

Die neueste Version von JavaScript zum Zeitpunkt des Schreibens ermöglicht die Verwendung von Pfeilfunktionen, die mit der folgenden Syntax geschrieben werden können:

var example = () => {
 // code to execute
}

example();

In beiden Fällen können die Klammern Parameter enthalten. Wenn es nur einen Parameter gibt, können die Klammern als solche weggelassen werden:

var example = parameter1 => {
 // code to execute
}

In den Beispielen in diesem Lernprogramm wird die Pfeilfunktionssyntax verwendet. Weitere Informationen zu Funktionen in JavaScript finden Sie in der Referenz https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions[Functions im Mozilla Developer Network.

für jeden()

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

Beginnen wir mit dem folgenden Array, das der Variablen "+ fish +" zugewiesen ist:

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

Wir können + forEach () + verwenden, um jedes Element im Array + fish + auf die Konsole zu drucken.

// Print out each item in the array
fish.forEach(individualFish => {
   console.log(individualFish);
})

Sobald wir dies tun, erhalten wir die folgende Ausgabe:

Outputpiranha
barracuda
cod
eel

Eine andere Möglichkeit, dies zu tun, besteht darin, das Schlüsselwort https://www.digitalocean.com/community/tutorials/how-to-construct-for-loops-injavascript [+ for + loop] zu verwenden und es anhand der Eigenschaft length zu testen des Arrays.

// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
   console.log(fish[i]);
}

Der obige Code hat die gleiche Ausgabe wie bei Verwendung der Methode + forEach () +. Als Iterationsmethode, die speziell für die Verwendung mit Arrays vorgesehen ist, ist "+ forEach () +" für diese bestimmte Aufgabe präziser und unkomplizierter.

Karte()

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

Als Beispiel für die Verwendung der Iterationsmethode + map () + können wir jede Iteration einer Schleife auf der Konsole ausgeben. + map () + mutiert das ursprüngliche Array nicht, sondern gibt stattdessen einen neuen Array-Wert zurück. Im Gegensatz zu "+ forEach () " muss die " map () +" - Methode einer neuen Variablen zugewiesen werden.

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

// Print out each item in the array
let printFish = fish.map(individualFish => {
   console.log(individualFish);
});

printFish;

Outputpiranha
barracuda
cod
eel

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

// Pluralize all items in the fish array
let pluralFish = fish.map(individualFish => {
   return `${individualFish}s`;
});

pluralFish;

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

Die ursprüngliche Variable "+ fish " ist unverändert, aber " pluralFish +" enthält jetzt eine modifizierte Version der ursprünglichen Variablen.

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 string indexing verwenden. Aufrufen des ersten Elements (oder Buchstabens) in jedem Zeichenfolgenelement des Arrays.

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

// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter(creature => {
 return creature[0] === "s";
});

filteredList;

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

Wir haben getestet, welche Elemente im Array ein "+ s " am " 0 +" - Index haben und das Ergebnis einer neuen Variablen zugewiesen.

+ filter () + ist eine Iterationsmethode, die das ursprüngliche Array nicht mutiert.

reduzieren()

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

Dies tritt häufig bei Zahlen auf, z. B. beim Ermitteln der Summe aller Zahlen in einem Array.

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

// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
   return a + b;
});

sum;

Output108

+ redu () + kann auch mit strings und anderen https: //www.digitalocean verwendet werden. de / community / tutorials / verständnis-datentypen-in-javascript [datentypen]. Der von + redu () + zurückgegebene Wert kann eine Zahl, ein String, ein Array oder ein anderer Datentyp sein. + reduce () + ist eine Iterationsmethode, die das ursprüngliche Array nicht verändert.

finden()

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

Als Beispiel erstellen wir eine Reihe von Meerestieren.

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

Dann testen wir mit der Methode + find () +, ob es sich bei einer der Kreaturen im Array um Kopffüßer handelt.

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
   return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Outputoctopus

Da "+ octopus " der erste Eintrag im Array war, der den Test in der Funktion " isCephalopod () +" erfüllte, ist dies der erste zurückgegebene Wert.

Mit der Methode + find () + können Sie mit Arrays 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 + seaCreatures + Beispiel aus der + find () + Methode verwenden.

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

Mit dem Test "+ isCephalopod +" finden wir die Indexnummer anstelle des Wertes der ersten Übereinstimmung.

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
   return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output1

+ octopus + ist das erste Element, das dem Test entspricht, 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.

Fazit

In diesem Tutorial haben wir die wichtigsten integrierten Iterationsarray-Methoden in JavaScript besprochen. Iterationsmethoden werden für jedes Element in einem Array ausgeführt und führen häufig eine neue Funktion aus. Wir haben uns überlegt, wie man Arrays durchläuft, den Wert jedes Elements in einem Array ändert, Arrays filtert und reduziert und Werte und Indizes findet.

Informationen zu den Grundlagen von Arrays finden Sie unter Arrays in JavaScript verstehen. Weitere Informationen zur Syntax in JavaScript finden Sie in unserem Tutorial unter "Syntax und Codestruktur in JavaScript verstehen."

TOC