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

<p><img src="https://img.php.cn/upload/article/000/465/014/169378710644881.jpg" alt="比较 JavaScript 中迭代数组的 4 种方法"></p> <p>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. </p> <p>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. </p> <p>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. </p> <table> <thead> <tr> <th>Methode</th> <th> </th> <th> </th> <th>Vorteile</th> <th>Nachteile</th> </tr> </thead> <tbody> <tr> <td>for-Schleife</td> <td> </td> <td> </td> <td>Sie können <code>break</code> zum vorzeitigen Beenden verwenden, geeignet für asynchronen Code, universelle Browserunterstützung</td> <td>Lang und fehleranfällig</td> </tr> <tr> <td> <code>forEach()</code>Methode</td> <td> </td> <td> </td> <td>Prägnant und leicht zu lesen</td> <td>Keine asynchrone Unterstützung, kein vorzeitiger Ausstieg <code>break</code> </td> </tr> <tr> <td> <code>for...of</code>Schleife</td> <td> </td> <td> </td> <td>Verwendung mit anderen iterierbaren Typen, ermöglicht ein frühes Beenden, Syntax reduziert Fehler</td> <td>Alte Browser bieten weniger Unterstützung</td> </tr> <tr> <td> <code>for...in</code>Schleife</td> <td> </td> <td> </td> <td>Effizient bei spärlichen Arrays, ermöglicht einen frühen Ausstieg</td> <td>Möglicherweise werden unerwartete geerbte Elemente zurückgegeben</td> </tr> </tbody> </table> <table> <thead> <tr> <th>Methode</th> <th>Flusskontrolle mit Unterbrechung und Wiederaufnahme? </th> <th>Kann ich asynchronen Code verwenden? </th> <th>Browser-Unterstützung</th> <th>Notizen</th> </tr> </thead> <tbody> <tr> <td>for-Schleife</td> <td>Ja</td> <td>Ja</td> <td>Alle Browser</td> <td>Detailliertere Syntax, Eins-zu-eins-Fehler</td> </tr> <tr> <td> <code>forEach()</code>Methode</td> <td> <p>Nein </p> </td> <td>Nein </td> <td>Moderner Browser</td> <td>Seien Sie prägnant und verketten Sie andere Funktionen (z. B. <code>map</code>)</td> </tr> <tr> <td> <code>for...of</code>Schleife</td> <td> <p>Ja</p> </td> <td>Ja</td> <td>Moderner Browser</td> <td>Einfache Syntax reduziert Fehler</td> </tr> <tr> <td> <code>for...in</code>Schleife</td> <td>Ja</td> <td>Ja</td> <td>Alle Browser</td> <td>Gültig für Arrays mit geringer Dichte, kann unerwartete (geerbte) Elemente zurückgeben</td> </tr> </tbody> </table> <h2 id="toc-oxn2-basics-for-accessing-array-elements">Grundlagen des Zugriffs auf Array-Elemente</h2> <p>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 <code>array_name[0]</code> 来访问第一个元素。同样，对于包含 <code>n</code> 元素的数组，可以使用 <code>array_name[n - 1]</code> im Code zugegriffen werden kann. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 </pre><div class="contentsignin">Nach dem Login kopieren</div></div> <h2 id="toc-a4xj-iteating-using-a-for-loop">Iterieren Sie mit einer <code>for</code> Schleife</h2> <p>Eine der gebräuchlichsten Methoden zum Durchlaufen eines Arrays ist das Schleifen. <code>for</code> 循环。 <code>for</code> 循环将迭代变量初始化为 0，以从第一个元素开始循环。由于我们想要迭代整个数组，因此需要计算数组的长度，这可以使用 <code>length</code> 属性轻松完成。然后可以使用 <code>array_name[length - 1]</code> 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 <code>length</code> einfach möglich ist. Auf das letzte Element im Array kann dann mit <code>array_name[length - 1]</code> zugegriffen werden. </p> <p>Der folgende Codeausschnitt zeigt uns, wie wir ein Array mithilfe der <code>for</code>-Schleifenreihenfolge durchlaufen: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 */ </pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Beachten Sie, wie wir den Kleiner-als-Operator (<code><</code>) 而不是小于或等于运算符 (<code><=</code>) als Schleifenendebedingung verwenden. </p> <p>Verwenden Sie <code>for</code> 循环有两个优点：它得到广泛支持，并且允许您通过 <code>break</code> 和 <code>continue</code> 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，<code>for</code> beim Schleifen über Arrays. Schleifen haben zwei Vorteile: Sie werden weithin unterstützt und ermöglichen Ihnen, den Fluss der Schleife durch die Anweisungen <code>break</code> und <code>continue</code> zu steuern. Sobald Sie gefunden haben, wonach Sie suchen, können Sie die Schleife verlassen. </p> Schleifen funktionieren auch gut, wenn Sie mit asynchronem Code arbeiten. <p> </p>Der Nachteil ist, dass es etwas langwierig ist und man ab und zu ein paar kleine Fehler machen kann. <h2 id="toc-hpwd-iteating-using-the-foreach-method"> <code>forEach()</code>Verwenden Sie die </h2>-Methode zum Iterieren<p> <code>forEach()</code>Sie können mit der integrierten </p>-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. <p> </p>Die Callback-Funktion kann drei verschiedene Parameter akzeptieren: <ol> <li> </li>Das aktuelle Element selbst<li> </li>Der Index des aktuellen Elements<li> <code>forEach()</code>Das Array, für das wir die </li>-Methode</ol> aufrufen <p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; animals.forEach(animal => console.log(animal)); /* Outputs: Fox Dog Lion Cat Zebra */ </pre><div class="contentsignin">Nach dem Login kopieren</div></div> <code>forEach()</code>Wie Sie sehen können, macht die Verwendung der </p>-Methode unseren Code sauberer. Hier ist ein weiteres Beispiel für die Verwendung des zweiten Parameters einer Callback-Funktion. <p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 */ </pre><div class="contentsignin">Nach dem Login kopieren</div></div> <code>forEach()</code> 非常适合对数组进行简单迭代。但是，不能使用 <code>break</code> 和 <code>continue</code> 中途退出循环并更改程序流程。使用 <code>forEach()</code>Die Verwendung von </p> eignet sich hervorragend für die einfache Iteration über Arrays. Sie können jedoch <code>break</code> und <code>continue</code> nicht verwenden, um eine Schleife zu verlassen und den Programmablauf zu ändern. Ein weiterer Nachteil der Verwendung von <h2 id="toc-486q-iteating-using-the-forof-loop"> besteht darin, dass Sie mit dieser Methode keinen asynchronen Code verwenden können. <code>for...of</code> </h2>Iterieren Sie mit einer <p> Schleife<code>for...of</code> 循环来迭代实现 <code>@@iterator</code> 方法的任何对象中的值。内置类型（例如 Array、String、Set 或 Map）可以使用 <code>for...of</code> </p>Der ES6-Standard fügt JavaScript viele neue Funktionen hinzu. Eines davon ist das Konzept von Iteratoren und iterierbaren Objekten. Sie können eine <p>-Schleife verwenden, um Werte in jedem Objekt zu durchlaufen, das die Methode <code>@@iterator</code> implementiert. Integrierte Typen (wie Array, String, Set oder Map) können mithilfe von <code>for...of</code> 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 <code>break</code> 或 <code>continue</code>-Schleifen über ihre Werte iterieren. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"]; for(let animal of animals) { console.log(animal); } /* Outputs: Fox Dog Lion Cat Zebra */ </pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Die Verwendung des </p>-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 <code>break</code> oder <code>continue</code> zu steuern. <h2 id="toc-ti5o-iteating-using-the-forin-loop"> <code>for...in</code>Der einzige mögliche Nachteil ist die etwas geringere Browserunterstützung, aber das hängt alles von Ihrer Zielgruppe ab. </h2> <p>Iterieren Sie mit einer <code>for...in</code> Schleife</p> <p>Sie können die <code>for...in</code>-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. </p> <p>Ich möchte hier erwähnen, dass die Verwendung der <code>for...in</code>-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. </p> <p><code>for...in</code> 循环比其他方法更好地遍历的数组类型。例如， <code>for...of</code> 循环将迭代稀疏数组中的所有空槽，而 <code>for...in</code> 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. </p> <p>Ein Sparse-Array ist ein Array-Typ, der mit einer <code>for...in</code>-Schleife besser durchlaufen werden kann als andere Methoden. Beispielsweise durchläuft eine </p>-Schleife alle leeren Slots in einem Array mit geringer Dichte, während dies bei einer <p>-Schleife nicht der Fall ist. <code>Object.hasOwn()</code> </p>Hier ist ein Beispiel für die Verwendung einer <h2 id="toc-4vpg-final-thoughts">-Schleife zum Durchlaufen eines Arrays mit geringer Dichte: </h2> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 */ </pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Sie haben vielleicht bemerkt, dass wir eine statische Methode namens <code>for</code> 循环来迭代数组。它允许您借助 <code>break</code> 和 <code>Continue</code> verwenden, um zu überprüfen, ob die angegebene Eigenschaft des Abfrageobjekts tatsächlich seine eigene Eigenschaft ist. </p> 🎜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 <code>break</code> und <code>Continue</code> zu steuern und unterstützt auch asynchronen Code. Andererseits müssen Sie bei einem Fehler vorsichtig sein. 🎜<p><code>forEach()</code> 方法提供了一种更短的循环数组的方法，但它不适用于异步代码。您也无法使用 <code>break</code> 和 <code>continue</code> Durchbrechen Sie Schleifen oder kontrollieren Sie den Programmfluss. </p> <p><code>for...of</code> 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. </p> <p>Schließlich: <code>for...in</code> 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. </p> <p>Die Miniaturansichten für diesen Artikel wurden mit DALL-E 2 von OpenAI generiert. </p>

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!