Maison >interface Web >js tutoriel >Explication détaillée de la façon de parcourir des tableaux en JavaScript
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'];
Méthode 1 : boucle for Cette méthode est plus couramment utilisée
"use strict";var arr = ['a','b','c','d'];var arrUp = [];for(var i = 0; i < arr.length; i++){ arrUp.push(arr[i].toUpperCase()); } console.log(arrUp); //['A','B','C','D']
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 = ['a','b','c','d'];var arrUp = [];for(var i in arr){ arrUp.push(arr[i].toUpperCase()); } console.log(arrUp); //['A','B','C','D']
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 = ['a','b','c','d'];var arrUp = []; arr.forEach(function(key, index, array){ arrUp.push(key.toUpperCase()); }); console.log(arrUp); //['A','B','C','D']
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 = ['a','b','c','d'];var arrUp = arr.map(function(key, index, array){ return key.toUpperCase(); }); console.log(arrUp); //['A','B','C','D']
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];
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.
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:待操作的数组}
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
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]
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
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!