Several Writing Methods and Efficiency Summary of for Cycle in JavaScript

Preface

For for loop, I believe everyone can't use it more often. But this time, I said for loop because I didn't understand the meaning of an for loop when I looked at the code, which really shouldn't be ah.

This for loop reads as follows:

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

What does this writing mean? Let's talk about it later. Now I sell a imprison son. I feel quite good about this writing.

Influence of for Cycle Writing on Efficiency

Before talking about the above code, let's talk about the efficiency of for loop. In contact with js, there are quite a few articles about the writing of for cycle and its influence on efficiency. But generally speaking, there are two ways to write for loop:

How to write a declared variable without writing it: for(var i = 0;i<arr.length;i++){} How to write declaration variables: for(var i = 0,len = arr.length;i < len;i++){}

In addition to the for loop, there are forEach() There are also articles saying that forEach() Highest efficiency, recommended forEach() Writing, so which is the most efficient? Let's take a test and have a look.

Test scheme

The overall test plan is as follows:

Make a test array variable with a capacity of 40 million. This test variable is traversed with for loop and foreach written in two ways respectively. On the same stable machine, 10 tests were carried out, and finally the average value was taken. Test Environment: CPU: Inter (R) Core i5-3210M, RAM: 12GM, system: win10 (x64)

Test flow

Making test variables

First, use while loop to do a test variable. This is very simple, as follows:

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

Write corresponding test functions

The code for measuring and executing time, I use console.time() And console.timeEnd() To test.

For these three for loops, first make three functions, which are

foreach cycle test:

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

for loop without declaring variables:

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

Writing of variable declaration

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

Execute a test function

Executing test functions is very simple here, that is, calling functions can be done

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

Test results

After 10 tests, the following results were obtained

foreach	不写声明	写声明
2372.891ms	672.530ms	743.974ms
2431.821ms	710.275ms	805.676ms
2422.448ms	729.287ms	741.014ms
2330.894ms	730.200ms	755.390ms
2423.186ms	703.255ms	769.674ms
2379.167ms	689.811ms	741.040ms
2372.944ms	712.103ms	710.524ms
2316.005ms	726.518ms	726.522ms
2535.289ms	733.826ms	747.427ms
2560.925ms	793.680ms	817.098ms
平均值	平均值	平均值
2414.56ms	720.15ms	755.83ms

I wonder if the result surprised you. I didn't expect the most common writing to be the most efficient. Why? I don't want to understand either. Let me know if anyone knows, but I guess the writing of the statement is meaningless. Because len = arr.length This arr.length It's probably already cached, so it doesn't make sense to declare an len variable for storage.

Finally, attach all the test code, copy it to your computer and test it directly. If there is any unreasonable place, please tell me

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

Special Writing of for Cycle

Let's talk about the code that I didn't understand at the beginning of the article, and review the familiar for loop syntax before saying it. The basic syntax for the for loop is:

for ( Statement  1;  Statement  2;  Statement  3)
{
 Block of code being executed 
}

Statement 1: Execute before the loop (code block) starts Statement 2: Define the conditions for running the loop (code block) Statement 3: Execute after the loop (code block) has been executed

If we want to output 1 to 10 with for loop, we can write this:

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

But! According to the above syntax instructions, we can also write like this

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

When I first started reading it, I was also puzzled. How can I write it like this? Statement 2 puts the loop condition, and i is what judgment condition. In fact, in statement 2, if true is returned, the loop will continue to execute. In js, when 0, null, undefined, false, '', "" are judged as conditions, the result is false, that is, when i reaches 0, it is false, and the loop ends.

Go back to the code at the beginning of the article

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

0

This rule = rules [i + +] is the judgment condition, and when it becomes undefined, the loop will be terminated. So this code is written like this:

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

1

In fact, the judgment and assignment are put into 1, and 1 side loops and 1 side assigns. Isn't it quite simple?

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or use Javascript. If you have any questions, you can leave a message for communication.