Comparaison d'exemples de méthodes de traversée de tableaux couramment utilisées dans JS

Cette fois, je vais vous présenter un exemple de comparaison des méthodes de traversée de tableaux JS couramment utilisées. Quelles sont les précautions pour les méthodes de traversée de tableaux JS couramment utilisées Voici des cas pratiques, jetons un coup d'œil.

Préface

Cet article appartient à la même série que l'article précédent sur plusieurs méthodes d'échange de variables JS et comparaison d'analyse des performances. Cet article continue. l'analyse. Plusieurs méthodes de traversée de tableaux couramment utilisées dans JS et leurs comparaisons de performances respectives

à partir de

La dernière fois, j'ai analysé plusieurs variables courantes dans JS Après avoir échangé les méthodes et leurs performances respectives, j'ai senti que cette méthode était plutôt bonne, j'ai donc extrait la logique de base, l'ai encapsulée dans un modèle et j'ai prévu de l'étendre dans une série. Cet article est le deuxième article de la série. , une analyse et une comparaison des méthodes de traversée de tableaux JS

Plusieurs façons de parcourir des tableaux JS

Traversée de tableaux JS, essentiellement pour, forin, foreach , forof, map et d'autres méthodes, Ce qui suit présente plusieurs méthodes de traversée de tableaux utilisées dans la comparaison d'analyse et d'analyse des performances de cet article

Le premier type : boucle for ordinaire

Le le code est le suivant :

for(j = 0; j < arr.length; j++) {
}

Brève description : Le plus simple et le plus fréquemment utilisé Bien que les performances ne soient pas faibles, il y a encore place à l'optimisation

Deuxièmement. tapez : version optimisée de la boucle for

Le code est le suivant :

for(j = 0,len=arr.length; j < len; j++) {
}

Brève description : utilisez des variables temporaires pour mettre en cache la longueur afin d'éviter d'obtenir à plusieurs reprises la longueur du tableau. l'effet d'optimisation sera plus évident lorsque le tableau est plus grand.

Cette méthode est fondamentalement la plus performante parmi toutes les méthodes de parcours de boucle

Le troisième type : version affaiblie de la boucle for

Le code est le suivant :

for(j = 0; arr[j]!=null; j++) {
}

Brève explication : cette méthode est en fait strictement une boucle for, mais elle n'utilise pas le jugement de longueur, mais utilise la variable elle-même pour juger

En fait, cette méthode Le les performances sont bien inférieures à celles de la boucle for ordinaire

Le quatrième type : boucle foreach

Le code est le suivant :

arr.forEach(function(e){
});

Brève description : Le tableau est livré avec La boucle foreach est utilisée plus fréquemment et ses performances sont en fait plus faibles que la boucle for ordinaire

Le cinquième type : variante foreach

Le Le code est le suivant :

Array.prototype.forEach.call(arr,function(el){
});

Brève description : Puisque foreach est livré avec le type Array, certains types autres que ce type ne peuvent pas être utilisés directement (comme NodeList), donc cette variante est créée en utilisant cette variante. permettre à des tableaux similaires d'avoir la fonction foreach.

Les performances réelles sont plus faibles que celles d'un foreach ordinaire

Le sixième type : boucle forin

Le code est le suivant :

for(j in arr) {
}

Brève explication : Beaucoup de gens aiment utiliser cette boucle, mais en fait, après analyse et tests, c'est la moins efficace parmi les nombreuses méthodes de parcours de boucle

Le septième méthode : map Le code pour parcourir

est le suivant :

arr.map(function(n){
});

Brève description : Cette méthode est également largement utilisée Bien qu'elle soit plus élégante à utiliser, la méthode réelle. l'efficacité n'est pas aussi bonne que foreach

Le huitième type : forof traversal (nécessite le support ES6)

Le code est le suivant :

for(let value of arr) {
});

Brève description : Cette méthode est utilisée dans es6. Les performances sont meilleures que celles du forin, mais toujours pas aussi bonnes que la boucle for ordinaire

Comparaison des performances de diverses méthodes de traversée

énumérées ci-dessus Plusieurs méthodes ont été comparées et analysées une par une. En gros, la conclusion que l'on peut tirer est la suivante :

La boucle for ordinaire est la plus élégante .

(PS : tous les codes ci-dessus effectuent simplement des boucles vides, il n'y a pas de code d'exécution interne dans la boucle, ils analysent simplement le temps de chaque boucle)

Performance captures d'écran de comparaison

Résultat de l'analyse 1

Les données de la capture d'écran ci-dessous sont la conclusion tirée après l'avoir exécutée 100 fois dans Chrome (supportant es6) (chacun exécuté 10 fois, un total de 10 cycles, résultats d'analyse obtenus)

On voit que la boucle forin est la plus lente. La boucle for ordinaire optimisée est la plus rapide

Résultat de l'analyse 2

Les données de capture d'écran suivantes sont la conclusion tirée après avoir exécuté 1000 fois dans Chrome (prend en charge es6) (Exécuter 100 fois à chaque fois, 10 cycles au total, les résultats d'analyse obtenus)

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention au php chinois Autres articles connexes en ligne !

Lecture recommandée

Comment utiliser JS pour fusionner plusieurs tableaux et éliminer les recalculs

Explication détaillée des étapes à utiliser lien de la liste déroulante antd

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!