Maison interface Web Questions et réponses frontales Comment parcourir une liste en JavaScript

Comment parcourir une liste en JavaScript

May 12, 2023 pm 02:53 PM

En JavaScript, nous avons souvent besoin de parcourir des listes. Ce processus est très courant et constitue une partie essentielle de la programmation. Cet article expliquera comment boucler une liste en JavaScript afin que les lecteurs puissent mieux maîtriser cette compétence importante.

1. boucle for

La boucle for est l'une des méthodes de bouclage les plus couramment utilisées en JavaScript. Elle convient aux situations où le nombre de boucles est connu, comme la boucle dans un tableau.

Ce qui suit est un exemple d'utilisation d'une boucle for pour parcourir un tableau :

let arr = ['apple', 'banana', 'pear', 'orange'];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
Copier après la connexion

Dans le code ci-dessus, nous définissons un tableau arr, puis utilisons une boucle for pour parcourir le tableau et imprimer sur chaque élément. arr,然后使用for循环遍历数组并打印出每个元素。

二、forEach方法

除了使用for循环遍历数组,还可以使用JavaScript提供的forEach()方法来实现循环操作。

下面是一个使用forEach()方法遍历数组的例子:

let arr = ['apple', 'banana', 'pear', 'orange'];
arr.forEach(function(item) {
  console.log(item);
});
Copier après la connexion

上面的代码中,我们定义了一个数组arr,然后使用forEach()方法遍历数组并打印出每个元素。forEach()方法需要传入一个回调函数,该函数会在遍历数组的每个元素时执行一次。

三、for...in循环

除了循环遍历数组,还有一些情况下需要遍历JavaScript对象。这时候,我们可以使用for...in循环来实现遍历操作。

下面是一个使用for...in循环遍历对象的例子:

let obj = {
  name: 'Tom',
  age: 20,
  gender: 'male'
};
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}
Copier après la connexion

上面的代码中,我们定义了一个JavaScript对象obj,然后使用for...in循环遍历对象并打印出每个属性的键值对。

注意,for...in循环并不保证对象属性的遍历顺序,因此在实际应用中需要注意这一点。

四、while循环

JavaScript中的while循环可以在条件满足的情况下反复执行一段代码。相比于for循环,while循环更加灵活,适用于不确定循环次数的情况。

下面是一个使用while循环打印数字的例子:

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}
Copier après la connexion

上面的代码中,我们首先定义了变量i,然后使用while循环反复打印出i的值,直到i的值为10时跳出循环。

五、do...while循环

do...while循环与while循环类似,不过do...while循环会先执行一次循环体,然后再根据条件判断是否需要继续执行。

下面是一个使用do...while循环打印数字的例子:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);
Copier après la connexion

上面的代码中,我们定义了变量i,然后使用do...while循环打印出i的值。与while循环不同的是,在第一次循环时,i的值为0,不满足循环条件,但是由于是使用do...while

2. Méthode forEach

En plus d'utiliser la boucle for pour parcourir le tableau, vous pouvez également utiliser la méthode forEach() fournie par JavaScript pour implémenter des opérations de boucle.

Ce qui suit est un exemple d'utilisation de la méthode forEach() pour parcourir un tableau : 🎜rrreee🎜Dans le code ci-dessus, nous définissons un tableau arr puis utilisons forEach La méthode () parcourt le tableau et imprime chaque élément. La méthode forEach() doit transmettre une fonction de rappel, qui sera exécutée une fois lorsque chaque élément du tableau est parcouru. 🎜🎜3. for...in loop🎜🎜En plus de parcourir des tableaux, il existe également des situations dans lesquelles des objets JavaScript doivent être parcourus. À ce stade, nous pouvons utiliser la boucle for...in pour implémenter l'opération de traversée. 🎜🎜Ce qui suit est un exemple d'utilisation de for...in pour parcourir des objets : 🎜rrreee🎜Dans le code ci-dessus, nous définissons un objet JavaScript obj, puis use for...inParcourt l'objet et imprime les paires clé-valeur pour chaque propriété. 🎜🎜Notez que la boucle for...in ne garantit pas l'ordre de parcours des propriétés de l'objet, vous devez donc y prêter attention dans les applications pratiques. 🎜🎜4. Boucle While🎜🎜La boucle while en JavaScript peut exécuter à plusieurs reprises un morceau de code si les conditions sont remplies. Par rapport à la boucle for, la boucle while est plus flexible et adaptée aux situations où le nombre de boucles est incertain. 🎜🎜Ce qui suit est un exemple d'utilisation d'une boucle while pour imprimer des nombres : 🎜rrreee🎜Dans le code ci-dessus, nous définissons d'abord la variable i, puis utilisons whileLa boucle code> imprime à plusieurs reprises la valeur de i jusqu'à ce que la valeur de i soit 10 et sorte de la boucle. 🎜🎜5. boucle do...while🎜🎜La boucle do...while est similaire à la boucle while, mais do...while La boucle exécutera d'abord le corps de la boucle une fois, puis déterminera si elle doit continuer l'exécution en fonction des conditions. 🎜🎜Ce qui suit est un exemple d'utilisation d'une boucle do...while pour imprimer des nombres : 🎜rrreee🎜Dans le code ci-dessus, nous définissons la variable i, puis use La boucle do...while affiche la valeur de i. Différent de la boucle while, dans la première boucle, la valeur de i est 0, ce qui ne remplit pas la condition de boucle. Cependant, parce que do... while boucle, donc le corps de la boucle sera exécuté au moins une fois. 🎜🎜Résumé🎜🎜En JavaScript, les opérations sur les boucles sont une partie essentielle du processus de programmation. Cet article présente les méthodes de boucle couramment utilisées, notamment les boucles for, les méthodes forEach, les boucles for...in, les boucles while et les boucles do... While. , les lecteurs peuvent choisir différentes méthodes de boucle pour implémenter leur propre logique de code en fonction des besoins réels. 🎜

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Mar 19, 2025 pm 03:58 PM

L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.

Expliquez le concept de chargement paresseux. Expliquez le concept de chargement paresseux. Mar 13, 2025 pm 07:47 PM

Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Mar 18, 2025 pm 01:44 PM

Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.

Comment fonctionne le currying en JavaScript et quels sont ses avantages? Comment fonctionne le currying en JavaScript et quels sont ses avantages? Mar 18, 2025 pm 01:45 PM

L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code

Comment fonctionne l'algorithme de réconciliation React? Comment fonctionne l'algorithme de réconciliation React? Mar 18, 2025 pm 01:58 PM

L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159

Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()? Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()? Mar 21, 2025 pm 06:23 PM

L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Mar 19, 2025 pm 03:59 PM

L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.

Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Mar 19, 2025 pm 04:10 PM

L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.

See all articles