Maison > interface Web > js tutoriel > Résumé des méthodes de parcours de tableau JS

Résumé des méthodes de parcours de tableau JS

零到壹度
Libérer: 2018-04-21 15:24:17
original
1631 Les gens l'ont consulté

La traversée de tableau JS doit être utilisée dans le projet Afin d'écrire du code élégant, utilisez la méthode au bon endroit et nous allons comparer plusieurs méthodes et les afficher dans es6, vous devez créer une conversion. Environnement es5. Ce n'est pas l'objet de cet article. Vous pouvez en parler dans le prochain article.

1. La boucle for

est la plus fréquemment utilisée et est utilisée par le front-end, ce qui signifie que je n'utiliserai la boucle for qu'au début . . .

let arr = [&#39;123&#39;, &#39;456&#39;, &#39;789&#39;];for (let i = 0; i < arr.length; i ++) {
    console.log(arr[i]);
}
Copier après la connexion

est le plus couramment utilisé, mais il y a place à l'optimisation :

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

Utilisez des variables temporaires pour stocker la valeur de longueur afin d'éviter d'obtenir à plusieurs reprises la longueur du tableau.

2. boucle for...of

La nouvelle méthode de boucle dans es6 est plus simple et plus efficace que la boucle for dans es5. Elle fournit également trois nouvelles méthodes :

<🎜. >
  1. key() est un parcours de noms de clés ;

  2. value() est un parcours de valeurs clés ; >entries () est un parcours de paires clé-valeur

  3. 3. boucle foreach

  4. La méthode foreach du tableau est utilisée plus fréquemment, mais ses performances sont pires que celles de la boucle for faible. Il présente l'avantage que les éléments vides du tableau peuvent être automatiquement omis, ce qui équivaut à un vidage automatique.
let arr = [&#39;科大讯飞&#39;, &#39;政法BG&#39;, &#39;前端开发&#39;];
for (let item of arr) {  
  console.log(item);
}
// 输出数组索引
for (let item of arr.keys()) {  
  console.log(item);
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {  
  console.log(item + &#39;:&#39; + val);
}
Copier après la connexion

4. Boucle de filtre

a une fonction de boucle, qui est principalement utilisée pour filtrer les tableaux et reçoit une méthode, qui renverra une collection d'éléments conformes à la fonction.

let arr = [&#39;科大讯飞&#39;, ,  &#39;政法BG&#39;, , &#39;前端开发&#39;];
arr.forEach((val,index)=>console.log(index,val));
Copier après la connexion

5. Certaines boucles

ont la même fonction que filter La différence est qu'elles renvoient une valeur booléenne, qui est utilisée pour vérifier si un objet existe dans le tableau.

let arr = [{
    label: &#39;科大讯飞&#39;,    
    value: 1
}, {
    label: &#39;政法BG&#39;,    value: 2
}, {
    label: &#39;前端开发&#39;,    value: 3
}];

const arr1 = arr.filter(list => list.value === 1);
console.log(arr1);
Copier après la connexion

Il est donc souvent utilisé dans if.

6. La fonction de remplacement de la boucle de carte

if (arr.some(list => list.value === 1)) {
    console.log(&#39;执行了!&#39;)
}
Copier après la connexion
, elle renverra un ensemble de valeurs renvoyées en appelant la fonction de rappel pour chaque élément du tableau d'origine.

Ce qui précède sont les méthodes de parcours de tableau couramment utilisées. À l'avenir, vous pourrez utiliser une méthode en fonction de la situation réelle, au lieu d'utiliser des boucles for partout.

let arr = [1, 2, 3, 4];
onst arr1 = arr.map(list => list * 2);
console.log(arr1);
Copier après la connexion

Recommandations associées :


Méthodes courantes pour parcourir les tableaux

3 méthodes de parcours des collections de listes

Explication détaillée de HashMap dans Java 8 (structure de stockage, implémentation de fonctions, optimisation de l'expansion, sécurité des threads, méthode de traversée)

Revisiter la structure des données : méthodes courantes des arbres binaires et trois méthodes de traversée Implémentation Java

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