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

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.

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.

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.

Méthode			Avantages	Inconvénients
pour la boucle			Vous pouvez utiliser break pour quitter plus tôt, adapté au code asynchrone, prise en charge universelle du navigateur	Long et sujet aux erreurs
forEach()Méthode			Concis et facile à lire	Pas de support asynchrone, pas de sortie anticipée break
for...ofBoucle			Utiliser avec d'autres types itérables, permettant une sortie anticipée, la syntaxe réduit les erreurs	Les anciens navigateurs sont moins pris en charge
for...inBoucle			Efficace sur les tableaux clairsemés, permettant une sortie anticipée	Renvoi possible d'éléments hérités inattendus

Méthode	Contrôle de flux avec interruption et reprise ?	Puis-je utiliser du code asynchrone ?	Prise en charge du navigateur	Remarques
pour la boucle	Oui	Oui	Tous les navigateurs	Syntaxe plus détaillée, erreurs individuelles
forEach()Méthode	Non	Non	Navigateur moderne	Soyez concis et enchaînez après d'autres fonctions (c'est-à-dire map)
for...ofBoucle	Oui	Oui	Navigateur moderne	Une syntaxe simple réduit les erreurs
for...inBoucle	Oui	Oui	Tous les navigateurs	Valide pour les tableaux clairsemés, peut renvoyer des éléments inattendus (hérités)

Bases de l'accès aux éléments du tableau

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 array_name[0] 来访问第一个元素。同样，对于包含 n 元素的数组，可以使用 array_name[n - 1] dans le code.

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

Itérer en utilisant une forboucle

L'une des façons les plus courantes de parcourir un tableau est le for 循环。 for 循环将迭代变量初始化为 0，以从第一个元素开始循环。由于我们想要迭代整个数组，因此需要计算数组的长度，这可以使用 length 属性轻松完成。然后可以使用 array_name[length - 1] le bouclage.

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 length. Le dernier élément du tableau est alors accessible en utilisant array_name[length - 1].

forL'extrait de code suivant nous montre comment parcourir un tableau en utilisant

l'ordre de boucle :

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
*/

) 而不是小于或等于运算符 (<code>Notez comment nous utilisons l'opérateur inférieur à (

) comme condition de fin de boucle.

for 循环有两个优点：它得到广泛支持，并且允许您通过 break 和 continue 语句控制循环流程。一旦找到所需内容，您就可以退出循环。当您处理异步代码时，forUtilisez

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 break et continue. Une fois que vous avez trouvé ce que vous cherchez, vous pouvez quitter la boucle.

Les boucles fonctionnent également bien lorsque vous utilisez du code asynchrone.

L'inconvénient est que c'est un peu long et que vous pourriez faire quelques erreurs mineures de temps en temps. forEach()

Utilisez la méthode

pour itérerforEach()

Vous pouvez également parcourir des tableaux en JavaScript à l'aide de la méthode

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.

La fonction de rappel peut accepter trois paramètres différents :
2. L'élément actuel lui-même
3. L'index de l'élément actuelforEach()
Le tableau sur lequel on appelle la

méthode

forEach()

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

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

Comme vous pouvez le constater, l'utilisation de la méthode

rend notre code plus propre. Voici un autre exemple d'utilisation du deuxième paramètre d'une fonction de rappel. forEach() 非常适合对数组进行简单迭代。但是，不能使用 break 和 continue 中途退出循环并更改程序流程。使用 forEach()

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
*/

L'utilisation de

est idéale pour une itération simple sur des tableaux. Cependant, vous ne pouvez pas utiliser break et continue pour quitter une boucle et modifier le déroulement du programme. Un autre inconvénient de l'utilisation de for...of est que vous ne pouvez pas utiliser de code asynchrone avec cette méthode.

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

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 for...of 构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置可迭代类型。除此之外，它允许您使用 break 或 continue pour parcourir les valeurs de n'importe quel objet qui implémente la méthode @@iterator. Les types intégrés tels que Array, String, Set ou Map peuvent parcourir leurs valeurs à l'aide de boucles

.

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

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

Il y a de nombreux avantages à utiliser la construction

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 break ou continue. for...in

Le seul inconvénient potentiel est une prise en charge légèrement moindre du navigateur, mais tout dépend de votre public cible.

for...inItérer en utilisant une

boucle

for...inVous pouvez également utiliser l'instruction

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.

for...inJe voudrais mentionner ici que l'utilisation de l'instruction

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.

for...in 循环比其他方法更好地遍历的数组类型。例如， for...of 循环将迭代稀疏数组中的所有空槽，而 for...in

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.

for...inUn tableau clairsemé est un type de tableau qui peut être parcouru avec une boucle

mieux que les autres méthodes. Par exemple, une boucle

parcourra tous les emplacements vides d'un tableau clairsemé, alors qu'une boucle Object.hasOwn() ne le fera pas.

Voici un exemple d'utilisation d'une boucle

pour parcourir un tableau clairsemé :

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
*/

for 循环来迭代数组。它允许您借助 break 和 ContinueVous 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 break et Continue, et prend également en charge le code asynchrone. D’un autre côté, cela vous oblige à faire attention à une erreur. 🎜

forEach() 方法提供了一种更短的循环数组的方法，但它不适用于异步代码。您也无法使用 break 和 continue Sortez des boucles ou contrôlez le déroulement du programme.

for...ofLe 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.

Enfin, for...in 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é.

Les vignettes de cet article ont été générées à l'aide du DALL-E 2 d'OpenAI.

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!