Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de la façon de parcourir des tableaux en JavaScript

韦小宝
Libérer: 2018-03-14 17:50:13
original
2178 Les gens l'ont consulté

Cet article explique comment JavaScripttraverse un tableau Si vous ne connaissez pas les tableaux traversants en JavaScript ou si vous êtes intéressé par les tableaux traversant JavaScript, jetons un coup d'œil à ceci. article, arrêtons les bêtises et allons droit au but

Cet article résume la méthode de parcours d'un tableau en js :

Problème : parcourir l'arr du tableau et convertir tous les éléments en majuscules

var arr = ['a','b','c','d'];
Copier après la connexion

Méthode 1 : boucle for Cette méthode est plus couramment utilisée

"use strict";var arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;];var arrUp = [];for(var i = 0; i < arr.length; i++){
    arrUp.push(arr[i].toUpperCase());
}
console.log(arrUp);             //['A','B','C','D']
Copier après la connexion

Méthode 2 : for in loop Cette méthode est généralement utilisée pour parcourir des objets (le tableau est un objet spécial)

"use strict";var arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;];var arrUp = [];for(var i in arr){
    arrUp.push(arr[i].toUpperCase());
}
console.log(arrUp);             //['A','B','C','D']
Copier après la connexion

Méthode 3 : méthode forEach Méthode d'itération de tableau (expliquée ci-dessous)
Valeur de retour : Aucune valeur de retour

"use strict";var arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;];var arrUp = [];
arr.forEach(function(key, index, array){
    arrUp.push(key.toUpperCase());
});
console.log(arrUp);             //['A','B','C','D']
Copier après la connexion

Méthode 4 : méthode map Méthode d'itération de tableau (expliquée ci-dessous)
Valeur de retour : Renvoie un tableau composé des résultats de chaque appel de fonction

"use strict";var arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;];var arrUp = arr.map(function(key, index, array){
    return key.toUpperCase();
});
console.log(arrUp);             //['A','B','C','D']
Copier après la connexion

Pour la question simple ci-dessus, ces quatre méthodes peuvent être relativement meilleures, mais le premier problème est plus compliqué

var arr = [1, 4, 10, 5, 8];
Copier après la connexion

Question : Pour ce tableau, veuillez compter le nombre d'éléments du tableau supérieur que 6
Juste pour donner un exemple simple, les quatre méthodes ci-dessus fonctionneront également, mais il peut être plus difficile de juger Voici les méthodes de parcours des tableaux, je pense qu'elles peuvent être meilleures dans différents scénarios.

Méthode d'itération du tableau

La méthode suivante, seule la valeur de retour est différente, le reste est exactement le même : Reçoit 2 paramètres, un function (obligatoire) ) et l'objet scope qui exécute la fonction (facultatif, généralement non utilisé, je ne sais pas quelle est la magie pour le moment, donc je n'expliquerai pas trop)

//要接受的函数,本文叫判断函数function(key, index, array){
    //key: 数组项值
    //index: 该项的数组下标
    //arr:待操作的数组}
Copier après la connexion

Méthode 5 : chaque méthode
Valeur de retour : Si la fonction de jugement renvoie vrai pour chaque élément de , alors renvoie vrai
Utilisation : Détecte chaque élément du tableau en fonction de la condition et souhaite simplement obtenir la valeur booléenne

"use strict";var arr = [1, 4, 10, 5, 8];var arrTest = arr.every(function(key, index, array){
    return (key > 2);
});
console.log(arrTest);   //false
Copier après la connexion

Méthode 6 : méthode de filtrage
Valeur de retour : Renvoie un tableau, les éléments du tableau sont composés d'éléments pour lesquels la fonction de jugement retournera vrai
Utilisation : Filtrage conditionnel

"use strict";var arr = [1, 4, 10, 5, 8];var arrTest = arr.filter(function(key, index, array){
    return (key > 6);
});
console.log(arrTest);   //[10, 8]
Copier après la connexion

Méthode 7 : une méthode
Valeur de retour : Si la fonction de jugement renvoie vrai pour un élément de , puis renvoie vrai
Utilisation : Filtrage conditionnel

"use strict";var arr = [1, 4, 10, 5, 8];var arrTest = arr.some(function(key, index, array){
    return (key > 6);
});
console.log(arrTest);   //true
Copier après la connexion

Ce qui précède est tout le contenu de cet article. Si vous n'en savez pas grand-chose, vous pouvez facilement maîtriser les deux côtés par vous-même !

Recommandations associées :

Résumé des méthodes JavaScript pour parcourir les tableaux

Utilisation de la boucle for-in et de la boucle for pour parcourir un tableau

Méthode de boucle while pour parcourir un tableau

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!