Vergleich von 4 Möglichkeiten zum Iterieren von Arrays in JavaScript

Wenn Sie die Grundlagen von JavaScript-Arrays bereits kennen, ist es an der Zeit, Ihre Fähigkeiten mit fortgeschritteneren Themen auf die nächste Stufe zu bringen. In dieser Reihe von Tutorials befassen Sie sich mit dem fortgeschrittenen Thema der Programmierung mit Arrays in JavaScript.

In fast jedem Projekt, das Arrays beinhaltet, müssen wir Operationen wie Iterieren oder Schleifen über Arrays ausführen. Es gibt viele Gründe, warum Sie möglicherweise eine Schleife über ein Array durchführen müssen, z. B. um Array-Daten als Ausgabe anzuzeigen oder zu konvertieren.

Sie können mit vielen Methoden über Arrays in JavaScript iterieren. In diesem Tutorial werfen wir einen Blick auf sie alle und besprechen gleichzeitig die Vor- und Nachteile jedes einzelnen im Detail.

Methode			Vorteile	Nachteile
for-Schleife			Sie können break zum vorzeitigen Beenden verwenden, geeignet für asynchronen Code, universelle Browserunterstützung	Lang und fehleranfällig
forEach()Methode			Prägnant und leicht zu lesen	Keine asynchrone Unterstützung, kein vorzeitiger Ausstieg break
for...ofSchleife			Verwendung mit anderen iterierbaren Typen, ermöglicht ein frühes Beenden, Syntax reduziert Fehler	Alte Browser bieten weniger Unterstützung
for...inSchleife			Effizient bei spärlichen Arrays, ermöglicht einen frühen Ausstieg	Möglicherweise werden unerwartete geerbte Elemente zurückgegeben

Methode	Flusskontrolle mit Unterbrechung und Wiederaufnahme?	Kann ich asynchronen Code verwenden?	Browser-Unterstützung	Notizen
for-Schleife	Ja	Ja	Alle Browser	Detailliertere Syntax, Eins-zu-eins-Fehler
forEach()Methode	Nein	Nein	Moderner Browser	Seien Sie prägnant und verketten Sie andere Funktionen (z. B. map)
for...ofSchleife	Ja	Ja	Moderner Browser	Einfache Syntax reduziert Fehler
for...inSchleife	Ja	Ja	Alle Browser	Gültig für Arrays mit geringer Dichte, kann unerwartete (geerbte) Elemente zurückgeben

Grundlagen des Zugriffs auf Array-Elemente

Beginnen wir mit den Grundlagen des Zugriffs auf Array-Elemente mithilfe von Indizes. Die Array-Indizierung in JavaScript beginnt bei 0. Das bedeutet, dass auf das letzte Element über die Verwendung von array_name[0] 来访问第一个元素。同样，对于包含 n 元素的数组，可以使用 array_name[n - 1] im Code zugegriffen werden kann.

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

let first = animals[0];

let last = animals[4];

console.log(first);
// Outputs: Fox

console.log(last);
// Outputs: Zebra

Iterieren Sie mit einer for Schleife

Eine der gebräuchlichsten Methoden zum Durchlaufen eines Arrays ist das Schleifen. for 循环。 for 循环将迭代变量初始化为 0，以从第一个元素开始循环。由于我们想要迭代整个数组，因此需要计算数组的长度，这可以使用 length 属性轻松完成。然后可以使用 array_name[length - 1] Die Schleife initialisiert die Iterationsvariable auf 0, um die Schleife ab dem ersten Element zu starten. Da wir über das gesamte Array iterieren möchten, müssen wir die Länge des Arrays berechnen, was mit dem Attribut length einfach möglich ist. Auf das letzte Element im Array kann dann mit array_name[length - 1] zugegriffen werden.

Der folgende Codeausschnitt zeigt uns, wie wir ein Array mithilfe der for-Schleifenreihenfolge durchlaufen:

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

let animal_count = animals.length;

for(let i = 0; i < animal_count; i++) {
  console.log(animals[i]);
}
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

Beachten Sie, wie wir den Kleiner-als-Operator () 而不是小于或等于运算符 (<code>) als Schleifenendebedingung verwenden.

Verwenden Sie for 循环有两个优点：它得到广泛支持，并且允许您通过 break 和 continue 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，for beim Schleifen über Arrays. Schleifen haben zwei Vorteile: Sie werden weithin unterstützt und ermöglichen Ihnen, den Fluss der Schleife durch die Anweisungen break und continue zu steuern. Sobald Sie gefunden haben, wonach Sie suchen, können Sie die Schleife verlassen.

Schleifen funktionieren auch gut, wenn Sie mit asynchronem Code arbeiten.

Der Nachteil ist, dass es etwas langwierig ist und man ab und zu ein paar kleine Fehler machen kann.

forEach()Verwenden Sie die

-Methode zum Iterieren

forEach()Sie können mit der integrierten

-Methode auch über Arrays in JavaScript iterieren. Diese Methode akzeptiert als Argument eine Callback-Funktion, die einmal für jedes Array-Element ausgeführt wird. Die Rückruffunktion kann an anderer Stelle definiert werden, es kann eine Inline-Funktion oder eine Pfeilfunktion sein.

Die Callback-Funktion kann drei verschiedene Parameter akzeptieren:

Das aktuelle Element selbst
Der Index des aktuellen Elements
3. forEach()Das Array, für das wir die
-Methode

aufrufen

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

animals.forEach(animal => console.log(animal));
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

forEach()Wie Sie sehen können, macht die Verwendung der

-Methode unseren Code sauberer. Hier ist ein weiteres Beispiel für die Verwendung des zweiten Parameters einer Callback-Funktion.

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

animals.forEach((animal, idx) => {
  console.log(`Animal ${idx + 1}: ${animal}`);
});
/* Outputs:
Animal 1: Fox
Animal 2: Dog
Animal 3: Lion
Animal 4: Cat
Animal 5: Zebra
*/

forEach() 非常适合对数组进行简单迭代。但是，不能使用 break 和 continue 中途退出循环并更改程序流程。使用 forEach()Die Verwendung von

eignet sich hervorragend für die einfache Iteration über Arrays. Sie können jedoch break und continue nicht verwenden, um eine Schleife zu verlassen und den Programmablauf zu ändern. Ein weiterer Nachteil der Verwendung von

besteht darin, dass Sie mit dieser Methode keinen asynchronen Code verwenden können. for...of

Iterieren Sie mit einer

Schleifefor...of 循环来迭代实现 @@iterator 方法的任何对象中的值。内置类型（例如 Array、String、Set 或 Map）可以使用 for...of

Der ES6-Standard fügt JavaScript viele neue Funktionen hinzu. Eines davon ist das Konzept von Iteratoren und iterierbaren Objekten. Sie können eine

-Schleife verwenden, um Werte in jedem Objekt zu durchlaufen, das die Methode @@iterator implementiert. Integrierte Typen (wie Array, String, Set oder Map) können mithilfe von for...of 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 break 或 continue-Schleifen über ihre Werte iterieren.

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];

for(let animal of animals) {
  console.log(animal);
}
/* Outputs:
Fox
Dog
Lion
Cat
Zebra
*/

Die Verwendung des

-Konstrukts für die Iteration bietet viele Vorteile. Sie können es beispielsweise auch verwenden, um über andere integrierte iterierbare Typen zu iterieren. Unter anderem ermöglicht es Ihnen, Schleifen zu durchbrechen und den Programmfluss mithilfe der Anweisungen break oder continue zu steuern.

for...inDer einzige mögliche Nachteil ist die etwas geringere Browserunterstützung, aber das hängt alles von Ihrer Zielgruppe ab.

Iterieren Sie mit einer for...in Schleife

Sie können die for...in-Anweisung auch verwenden, um ein Array zu durchlaufen. Dadurch werden alle aufzählbaren Zeichenfolgeneigenschaften des Objekts durchlaufen. Dazu gehören auch geerbte aufzählbare Eigenschaften.

Ich möchte hier erwähnen, dass die Verwendung der for...in-Anweisung zum Durchlaufen einer Schleife nicht empfohlen wird. Dies liegt daran, dass diese Anweisung, wie ich bereits erwähnt habe, alle ganzzahligen und nicht ganzzahligen Eigenschaften durchläuft, auch wenn sie geerbt sind. Wenn wir über ein Array iterieren, sind wir normalerweise nur an ganzzahligen Schlüsseln interessiert.

for...in 循环比其他方法更好地遍历的数组类型。例如， for...of 循环将迭代稀疏数组中的所有空槽，而 for...in Die Durchlaufreihenfolge der Schleife ist genau definiert, sie beginnt mit dem Durchlauf nicht negativer ganzzahliger Schlüssel. Nichtnegative Ganzzahlschlüssel werden in aufsteigender Reihenfolge ihres Wertes durchlaufen. Anschließend durchlaufen Sie die anderen Zeichenfolgenschlüssel in der Reihenfolge, in der sie erstellt wurden.

Ein Sparse-Array ist ein Array-Typ, der mit einer for...in-Schleife besser durchlaufen werden kann als andere Methoden. Beispielsweise durchläuft eine

-Schleife alle leeren Slots in einem Array mit geringer Dichte, während dies bei einer

-Schleife nicht der Fall ist. Object.hasOwn()

Hier ist ein Beispiel für die Verwendung einer

-Schleife zum Durchlaufen eines Arrays mit geringer Dichte:

let words = new Array(10000);

words[0] = "pie";
words[548] = "language";
words[3497] = "hungry";

for(let idx in words) {
  if(Object.hasOwn(words, idx)) {
    console.log(`Position ${idx}: ${words[idx]}`);
  }
}
/* Outputs:
Position 0: pie
Position 548: language
Position 3497: hungry
*/

Sie haben vielleicht bemerkt, dass wir eine statische Methode namens for 循环来迭代数组。它允许您借助 break 和 Continue verwenden, um zu überprüfen, ob die angegebene Eigenschaft des Abfrageobjekts tatsächlich seine eigene Eigenschaft ist.

🎜Abschließende Gedanken🎜 🎜Sie können jederzeit eine reguläre 🎜-Schleife verwenden, um über ein Array zu iterieren. Es ermöglicht Ihnen, den Programmfluss mit Hilfe der Schlüsselwörter break und Continue zu steuern und unterstützt auch asynchronen Code. Andererseits müssen Sie bei einem Fehler vorsichtig sein. 🎜

forEach() 方法提供了一种更短的循环数组的方法，但它不适用于异步代码。您也无法使用 break 和 continue Durchbrechen Sie Schleifen oder kontrollieren Sie den Programmfluss.

for...of Looping bietet uns das Beste aus beiden Welten. Wir haben die volle Kontrolle über den Programmablauf und es funktioniert auch mit asynchronem Code. Sie müssen sich keine Sorgen machen, dass Sie einen Takt verpassen.

Schließlich: for...in Schleifen ist nicht die empfohlene Methode zum Durchlaufen von Arrays. Dies kann jedoch nützlich sein, wenn das Array, das Sie durchlaufen, sehr spärlich ist.

Die Miniaturansichten für diesen Artikel wurden mit DALL-E 2 von OpenAI generiert.

Das obige ist der detaillierte Inhalt vonVergleich von 4 Möglichkeiten zum Iterieren von Arrays in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!