Comparaison de 4 façons d'itérer des tableaux en JavaScript

<p><img src="https://img.php.cn/upload/article/000/465/014/169378710644881.jpg" alt="比较 JavaScript 中迭代数组的 4 种方法"></p> <p>Si vous connaissez déjà les bases des tableaux JavaScript, il est temps de faire passer vos compétences au niveau supérieur avec des sujets plus avancés. Dans cette série de didacticiels, vous explorerez le sujet intermédiaire de la programmation avec des tableaux en JavaScript. </p> <p>Dans presque tous les projets impliquant des tableaux, nous devons effectuer des opérations telles que des itérations ou des boucles sur des tableaux. Il existe de nombreuses raisons pour lesquelles vous pourriez avoir besoin d'effectuer une boucle sur un tableau, comme l'affichage des données du tableau en sortie ou leur conversion. </p> <p>Vous pouvez parcourir des tableaux en JavaScript en utilisant de nombreuses méthodes. Dans ce didacticiel, nous les examinerons tous tout en discutant en détail des avantages ou des inconvénients de chacun. </p> <table> <thead> <tr> <th>Méthode</th> <th> </th> <th> </th> <th>Avantages</th> <th>Inconvénients</th> </tr> </thead> <tbody> <tr> <td>pour la boucle</td> <td> </td> <td> </td> <td>Vous pouvez utiliser <code>break</code> pour quitter plus tôt, adapté au code asynchrone, prise en charge universelle du navigateur</td> <td>Long et sujet aux erreurs</td> </tr> <tr> <td> <code>forEach()</code>Méthode</td> <td> </td> <td> </td> <td>Concis et facile à lire</td> <td>Pas de support asynchrone, pas de sortie anticipée <code>break</code> </td> </tr> <tr> <td> <code>for...of</code>Boucle</td> <td> </td> <td> </td> <td>Utiliser avec d'autres types itérables, permettant une sortie anticipée, la syntaxe réduit les erreurs</td> <td>Les anciens navigateurs sont moins pris en charge</td> </tr> <tr> <td> <code>for...in</code>Boucle</td> <td> </td> <td> </td> <td>Efficace sur les tableaux clairsemés, permettant une sortie anticipée</td> <td>Renvoi possible d'éléments hérités inattendus</td> </tr> </tbody> </table> <table> <thead> <tr> <th>Méthode</th> <th>Contrôle de flux avec interruption et reprise ? </th> <th>Puis-je utiliser du code asynchrone ? </th> <th>Prise en charge du navigateur</th> <th>Remarques</th> </tr> </thead> <tbody> <tr> <td>pour la boucle</td> <td>Oui</td> <td>Oui</td> <td>Tous les navigateurs</td> <td>Syntaxe plus détaillée, erreurs individuelles</td> </tr> <tr> <td> <code>forEach()</code>Méthode</td> <td> <p>Non </p> </td> <td>Non </td> <td>Navigateur moderne</td> <td>Soyez concis et enchaînez après d'autres fonctions (c'est-à-dire <code>map</code>)</td> </tr> <tr> <td> <code>for...of</code>Boucle</td> <td> <p>Oui</p> </td> <td>Oui</td> <td>Navigateur moderne</td> <td>Une syntaxe simple réduit les erreurs</td> </tr> <tr> <td> <code>for...in</code>Boucle</td> <td>Oui</td> <td>Oui</td> <td>Tous les navigateurs</td> <td>Valide pour les tableaux clairsemés, peut renvoyer des éléments inattendus (hérités)</td> </tr> </tbody> </table> <h2 id="toc-oxn2-basics-for-accessing-array-elements">Bases de l'accès aux éléments du tableau</h2> <p>Commençons par les bases de l'accès aux éléments d'un tableau à l'aide d'index. L'indexation des tableaux en JavaScript commence à 0. Cela signifie que le dernier élément est accessible en utilisant <code>array_name[0]</code> 来访问第一个元素。同样，对于包含 <code>n</code> 元素的数组，可以使用 <code>array_name[n - 1]</code> dans le code. </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">Copier après la connexion</div></div> <h2 id="toc-a4xj-iteating-using-a-for-loop">Itérer en utilisant une <code>for</code>boucle</h2> <p>L'une des façons les plus courantes de parcourir un tableau est le <code>for</code> 循环。 <code>for</code> 循环将迭代变量初始化为 0，以从第一个元素开始循环。由于我们想要迭代整个数组，因此需要计算数组的长度，这可以使用 <code>length</code> 属性轻松完成。然后可以使用 <code>array_name[length - 1]</code> le bouclage. </p> La boucle initialise la variable d'itération à 0 pour démarrer la boucle à partir du premier élément. Puisque nous voulons parcourir l'ensemble du tableau, nous devons calculer la longueur du tableau, ce qui peut être facilement fait en utilisant l'attribut <code>length</code>. Le dernier élément du tableau est alors accessible en utilisant <code>array_name[length - 1]</code>. <p> <code>for</code>L'extrait de code suivant nous montre comment parcourir un tableau en utilisant </p> l'ordre de boucle : <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">Copier après la connexion</div></div> <code><</code>) 而不是小于或等于运算符 (<code><=</code>Notez comment nous utilisons l'opérateur inférieur à (</p>) comme condition de fin de boucle. <p> <code>for</code> 循环有两个优点：它得到广泛支持，并且允许您通过 <code>break</code> 和 <code>continue</code> 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，<code>for</code>Utilisez </p> lors du bouclage sur des tableaux. Les boucles ont deux avantages : elles sont largement prises en charge et elles vous permettent de contrôler le flux de la boucle via les instructions <code>break</code> et <code>continue</code>. Une fois que vous avez trouvé ce que vous cherchez, vous pouvez quitter la boucle. <p> Les boucles fonctionnent également bien lorsque vous utilisez du code asynchrone. </p> <h2 id="toc-hpwd-iteating-using-the-foreach-method">L'inconvénient est que c'est un peu long et que vous pourriez faire quelques erreurs mineures de temps en temps. <code>forEach()</code> </h2>Utilisez la méthode <p> pour itérer<code>forEach()</code> </p>Vous pouvez également parcourir des tableaux en JavaScript à l'aide de la méthode <p> intégrée. Cette méthode accepte comme argument une fonction de rappel qui est exécutée une fois pour chaque élément du tableau. La fonction de rappel peut être définie ailleurs, il peut s'agir d'une fonction en ligne ou d'une fonction fléchée. </p> <ol>La fonction de rappel peut accepter trois paramètres différents : <li> </li> <li>L'élément actuel lui-même</li> <li>L'index de l'élément actuel<code>forEach()</code> </li>Le tableau sur lequel on appelle la </ol> méthode<p> <code>forEach()</code> <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">Copier après la connexion</div></div> </p>Comme vous pouvez le constater, l'utilisation de la méthode <p> rend notre code plus propre. Voici un autre exemple d'utilisation du deuxième paramètre d'une fonction de rappel. <code>forEach()</code> 非常适合对数组进行简单迭代。但是，不能使用 <code>break</code> 和 <code>continue</code> 中途退出循环并更改程序流程。使用 <code>forEach()</code> <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">Copier après la connexion</div></div> </p>L'utilisation de <h2 id="toc-486q-iteating-using-the-forof-loop"> est idéale pour une itération simple sur des tableaux. Cependant, vous ne pouvez pas utiliser <code>break</code> et <code>continue</code> pour quitter une boucle et modifier le déroulement du programme. Un autre inconvénient de l'utilisation de <code>for...of</code> est que vous ne pouvez pas utiliser de code asynchrone avec cette méthode. </h2> <p>Itérer en utilisant une <code>for...of</code> 循环来迭代实现 <code>@@iterator</code> 方法的任何对象中的值。内置类型（例如 Array、String、Set 或 Map）可以使用 <code>for...of</code>boucle</p> <p>La norme ES6 ajoute de nombreuses nouvelles fonctionnalités à JavaScript. L'un d'eux est le concept d'itérateurs et d'objets itérables. Vous pouvez utiliser une boucle <code>for...of</code> 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 <code>break</code> 或 <code>continue</code> pour parcourir les valeurs de n'importe quel objet qui implémente la méthode <code>@@iterator</code>. Les types intégrés tels que Array, String, Set ou Map peuvent parcourir leurs valeurs à l'aide de boucles </p>. <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">Copier après la connexion</div></div> </p>Il y a de nombreux avantages à utiliser la construction <h2 id="toc-ti5o-iteating-using-the-forin-loop"> pour l'itération. Par exemple, vous pouvez également l'utiliser pour parcourir d'autres types itérables intégrés. Entre autres choses, il vous permet de sortir des boucles et de contrôler le déroulement du programme à l'aide des instructions <code>break</code> ou <code>continue</code>. <code>for...in</code> </h2>Le seul inconvénient potentiel est une prise en charge légèrement moindre du navigateur, mais tout dépend de votre public cible. <p> <code>for...in</code>Itérer en utilisant une </p>boucle<p> <code>for...in</code>Vous pouvez également utiliser l'instruction </p> pour parcourir un tableau. Cela parcourra toutes les propriétés de chaîne énumérables de l'objet. Cela inclut également les propriétés énumérables héritées. <p> <code>for...in</code>Je voudrais mentionner ici que l'utilisation de l'instruction </p> pour parcourir une boucle n'est pas recommandée. En effet, comme je l'ai mentionné précédemment, cette instruction parcourra toutes les propriétés entières et non entières, même si elles sont héritées. Lorsque nous parcourons un tableau, nous ne nous intéressons généralement qu’aux clés entières. <p> <code>for...in</code> 循环比其他方法更好地遍历的数组类型。例如， <code>for...of</code> 循环将迭代稀疏数组中的所有空槽，而 <code>for...in</code></p> L'ordre de parcours de la boucle est bien défini, il commence par le parcours de clés entières non négatives. Les clés entières non négatives sont parcourues dans l’ordre croissant des valeurs. Parcourez ensuite les autres clés de chaîne dans l’ordre dans lequel elles ont été créées. <p> <code>for...in</code>Un tableau clairsemé est un type de tableau qui peut être parcouru avec une boucle </p> mieux que les autres méthodes. Par exemple, une boucle <p> parcourra tous les emplacements vides d'un tableau clairsemé, alors qu'une boucle <code>Object.hasOwn()</code> ne le fera pas. </p> <h2 id="toc-4vpg-final-thoughts">Voici un exemple d'utilisation d'une boucle </h2> pour parcourir un tableau clairsemé : <p> <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">Copier après la connexion</div></div> <code>for</code> 循环来迭代数组。它允许您借助 <code>break</code> 和 <code>Continue</code>Vous avez peut-être remarqué que nous utilisons une méthode statique appelée pour vérifier si la propriété spécifiée de l'objet requête est bien sa propre propriété. 🎜 🎜Pensées finales🎜 🎜Vous pouvez toujours utiliser une boucle 🎜 normale pour parcourir un tableau. Il vous permet de contrôler le déroulement du programme à l'aide des mots-clés <code>break</code> et <code>Continue</code>, et prend également en charge le code asynchrone. D’un autre côté, cela vous oblige à faire attention à une erreur. 🎜<p><code>forEach()</code> 方法提供了一种更短的循环数组的方法，但它不适用于异步代码。您也无法使用 <code>break</code> 和 <code>continue</code> Sortez des boucles ou contrôlez le déroulement du programme. </p> <p><code>for...of</code>Le Looping nous offre le meilleur des deux mondes. Nous avons un contrôle total sur le déroulement du programme et cela fonctionne également avec du code asynchrone. Pas besoin de s'inquiéter de manquer un battement. </p> <p>Enfin, <code>for...in</code> le bouclage n'est pas la méthode recommandée pour parcourir des tableaux. Cependant, cela peut être utile si le tableau sur lequel vous effectuez une boucle est très clairsemé. </p> <p>Les vignettes de cet article ont été générées à l'aide du DALL-E 2 d'OpenAI. </p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!