Maison > interface Web > js tutoriel > Comment parcourir des tableaux en JavaScript

Comment parcourir des tableaux en JavaScript

青灯夜游
Libérer: 2021-10-25 15:29:26
original
25753 Les gens l'ont consulté

Méthodes pour parcourir les tableaux en JavaScript : 1. Utilisez une instruction de boucle for ; 2. Utilisez la méthode forEach() pour appeler la fonction de rappel ; 3. Utilisez la méthode map() pour appeler la fonction de rappel ; for..in" instruction de boucle ; 5. Utilisez l'instruction de boucle "for...of".

Comment parcourir des tableaux en JavaScript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Dans le processus d'écriture de code en JavaScript, vous pouvez utiliser plusieurs méthodes pour parcourir le tableau ; notamment la boucle for, la boucle forEach, la boucle map, la boucle forIn, la boucle forOf et d'autres méthodes.

1. boucle for : basique et simple

Il s'agit de la méthode la plus basique et la plus couramment utilisée pour parcourir un tableau ; divers langages de développement prennent généralement en charge cette méthode ;

let arr = ['a','b','c','d','e'];
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(i);    // 0 1 2 3 4
  console.log(arr[i]); //a b c d e
}
Copier après la connexion

2. Méthode forEach() : utilisez la fonction de rappel

forEach() Il s'agit d'une méthode de l'objet tableau, elle accepte une fonction de rappel en tant que paramètre.
Il y a trois paramètres dans la fonction de rappel :

  • 1er : élément du tableau (obligatoire)
  • 2ème : valeur d'index de l'élément du tableau (facultatif)
  • 3ème : le tableau lui-même (facultatif)
let arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;];
arr.forEach((item,index,arr)=> {
  console.log(item);  // a b c d e 
  console.log(index); // 0 1 2 3 4
  console.log(arr);  // [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;]
})
Copier après la connexion

3. map ( ) : Utiliser la fonction de rappel

Son utilisation est la même que la méthode forEach().

var arr = [
  {name:&#39;a&#39;,age:&#39;18&#39;},
  {name:&#39;b&#39;,age:&#39;19&#39;},
  {name:&#39;c&#39;,age:&#39;20&#39;}
];
arr.map(function(item,index) {
  if(item.name == &#39;b&#39;) {
    console.log(index) // 1
  }
})
Copier après la connexion

4. boucle for..in : parcourir des objets et des tableaux

la boucle for...in peut être utilisée pour boucler des objets et des tableaux.
Recommandé pour boucler des objets et peut également être utilisé pour parcourir json.

let obj = {
  name: &#39;王大锤&#39;,
  age: &#39;18&#39;,
  weight: &#39;70kg&#39;
}
for(var key in obj) {
  console.log(key);    // name age weight
  console.log(obj[key]); // 王大锤 18 70kg
}
----------------------------
let arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;];
for(var key in arr) {
  console.log(key); // 0 1 2 3 4 返回数组索引
  console.log(arr[key]) // a b c d e
}
Copier après la connexion

5. boucle for...of : parcourir des objets et des tableaux

peut boucler des tableaux et des objets, et est recommandé pour parcourir des tableaux.

for…of propose trois nouvelles méthodes :

  • key() consiste à parcourir les noms de clés ;
  • value() consiste à parcourir les valeurs clés ;
  • entries() consiste à parcourir les paires clé-valeur ;
6. Supplémentaire

6.1, problèmes de pause et de continuation

Dans le forEach, mapper, filtrer, réduire, chaque, certains fonction break et les mots-clés <code> continue ne prendront pas effet car ils sont en fonction, mais la fonction résout le problème des pièges de fermeture.

Pour utiliser break et continue, vous pouvez utiliser for, for...in, for...of, while.

forEach、map、filter、reduce、every、some 函数中 break continue 关键词都会不生效,因为是在function中,但function解决了闭包陷阱的问题。

要想使用 break、continue 可以使用 for、for...in、for...of、while

6.2、数组和对象

用于遍历数组元素使用:for(),forEach(),map(),for...of

用于循环对象属性使用:for...in

6.2, Tableaux et objets

Pour parcourir les éléments du tableau, utilisez : for(), forEach(), map(), for...of. 🎜🎜Pour les propriétés des objets en boucle, utilisez : for...in. 🎜🎜【Apprentissage recommandé : 🎜Tutoriel avancé javascript🎜】🎜

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal