Résumé de plusieurs méthodes d'écriture et efficacité de la boucle for en JavaScript

Avant-propos

Pour la boucle, je pense que tout le monde ne peut pas l'utiliser plus souvent. Mais cette fois, je parle de boucles for parce que lorsque j'ai regardé le code, je n'ai vraiment pas compris la signification d'une boucle for.

Cette boucle for s'écrit ainsi :

for (var i = 0, rule; rule = rules[i++];) {
 //do something
}

Que signifie cette écriture ? J’en parlerai plus tard, mais pour l’instant, je trouve que cette façon d’écrire est plutôt bonne.

L'impact de l'écriture de la boucle for sur l'efficacité

Avant de parler du code ci-dessus, parlons de l'efficacité de la boucle for. Lorsque je suis entré en contact avec js, il y avait pas mal d'articles sur la méthode d'écriture de la boucle for et son impact sur l'efficacité. Mais en général, il existe deux manières d'écrire une boucle for :

sans déclarer de variables : for(var i = 0;i

Écrire comment déclarer des variables : for(var i = 0,len = arr.length;i < len;i ){}

En plus de la boucle for, il y a aussi forEach(), il y a également des articles disant que forEach() est le plus efficace, et qu'il est recommandé d'utiliser forEach() Alors, lequel est le plus efficace ? Faisons un test et voyons.

Plan de test

Le plan de test global est le suivant :

Créez une variable de tableau de test contenant 40 millions.

Utilisez deux méthodes d'écriture de boucle for et foreach pour parcourir cette variable de test.

Sur la même machine stable, réalisez 10 tests et faites enfin la moyenne.

Environnement de test : CPU : Inter(R) Core i5-3210M, RAM : 12 GM, système : win10 (x64)

Processus de test

Créer des variables de test

Utilisez d'abord une boucle while pour créer une variable de test. C'est très simple, comme suit :

var testArrs = [],
 i = 0;
while(i<40000000){
 testArrs.push(i);
 i++;
}

Écrivez la fonction de test correspondante

<🎜. >Mesurer et pour le time code d'exécution, j'utilise console.time() et console.timeEnd() pour les tests.

Pour ces trois boucles for, créez d'abord trois fonctions. Ce sont des

test de boucle foreach :

function testForeach(testArrs){
 console.time('foreach');
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd('foreach');
}

Pas de boucle A for qui déclare. variables :

function testNoDeclare(testArrs){
 console.time('no declare');
 var newArrs = [];
 for(var i = 0;i<testArrs.length;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;no declare&#39;);
}

Ecriture avec déclaration de variable

function testUseDeclare(testArrs){
 console.time('use declare');
 var newArrs = [];
 for(var i = 0,len = testArrs.length;i<len;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;use declare&#39;);
}

Exécuter la fonction de test

Exécuter la fonction de test est très simple, il suffit d'appeler la fonction

testForeach(testArrs);
testNoDeclare(testArrs);
testUseDeclare(testArrs);

Résultats des tests

Après 10 tests, les résultats suivants ont été obtenus

Je me demande si le résultat vous a surpris ? Je ne m'attendais pas à ce que la manière d'écrire la plus courante soit la plus efficace. Pourquoi ? Je n’ai pas compris, donc si quelqu’un le sait, dites-le-moi, mais je suppose que la façon dont la déclaration est écrite n’a aucun sens. Parce que len = arr.length arr.length a peut-être été mis en cache, cela n'a donc aucun sens pour nous de déclarer une variable len pour le stockage.

Enfin, tous les codes de test sont joints. Copiez-les sur votre ordinateur et vous pourrez les tester directement. S'il y a quelque chose de déraisonnable, veuillez me le dire

var testArrs = [],
 i = 0;
while(i<40000000){
 testArrs.push(i);
 i++;
}
function testForeach(testArrs){
 console.time(&#39;foreach&#39;);
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd(&#39;foreach&#39;);
}
function testNoDeclare(testArrs){
 console.time(&#39;no declare&#39;);
 var newArrs = [];
 for(var i = 0;i<testArrs.length;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;no declare&#39;);
}
function testUseDeclare(testArrs){
 console.time(&#39;use declare&#39;);
 var newArrs = [];
 for(var i = 0,len = testArrs.length;i<len;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;use declare&#39;);
}
testForeach(testArrs);
testNoDeclare(testArrs);
testUseDeclare(testArrs);

<🎜. >

La manière particulière d'écrire la boucle for

Parlons du code que je n'ai pas compris au début de l'article. Avant cela, je devrais revoir la syntaxe familière de la boucle for. La syntaxe de base d'une boucle for est la suivante :

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

Instruction 1 : Exécuter

avant le début de la boucle (bloc de code) Instruction 2 : Définir la boucle d'exécution. (bloc de code) Conditionnel

Instruction 3 : Exécuter après l'exécution de la boucle (bloc de code)

Si nous utilisons une boucle for pour sortir 1 à 10, nous pouvons écrire :

for(var i=0;i<10;i++){
console.log(i);
}

Mais ! D'après les instructions grammaticales ci-dessus, nous pouvons également l'écrire comme ceci

for(var i=10;i--;){
console.log(i);
}

Quand je l'ai lu pour la première fois, j'étais confus, comment pouvait-il être écrit comme ça ? L'instruction 2 contient la condition de boucle et i- est la condition de jugement. En fait, dans l'instruction 2, si true est renvoyé, la boucle continuera à s'exécuter. En js, lorsque 0,null,undefined,false,'',"" est utilisé comme jugement conditionnel, le résultat est faux, ce qui signifie que lorsque i- atteint 0, il est faux et la boucle se termine.

Retournez au code au début de l'article

for (var i = 0, rule; rule = rules[i++];) {
 //do something
}

Cette règle = règles[i] est la condition de jugement Lorsqu'elle devient indéfinie, la la boucle sera terminée. Donc, si ce code est écrit de manière ordinaire, il ressemblerait à ceci :

for(var i = 0;i < rules.length;i++){
 var rule = rules[i]
}

En fait, il rassemble simplement le jugement et l'affectation, et attribue la valeur en boucle. N'est-ce pas assez simple ?

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra être utile à tout le monde dans l'apprentissage ou l'utilisation de Javascript. un message à communiquer.

Pour plus d'articles sur plusieurs méthodes d'écriture et un résumé de l'efficacité de la boucle for en JavaScript, veuillez faire attention au site Web PHP chinois !