Summary of several writing methods and efficiency of for loops in JavaScript

Preface

I believe everyone can use the for loop more often. But this time I talked about the for loop because when I looked at the code, I didn't understand the meaning of a for loop. It really shouldn't be.

This for loop is written like this:

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

What does this mean? Let’s talk about it later. I feel that this is a good way to write it.

Effect of for loop writing on efficiency

Before talking about the above code, let’s talk about the efficiency of the for loop. When I came into contact with JS, there are quite a lot of articles about the writing of for loops and the impact on efficiency. But in general, there are two ways to write for loops:

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

In addition to the for loop, there is alsoforEach() , there are also articles sayingforEach()The most efficient, recommendedforEach()How to write, so which one is more efficient? Let's do a test and take a look.

Test plan

The overall test plan is as follows:

1. Make a test array variable that holds 40 million.
2. The test variable is traversed using two for loops and foreach, respectively.
3. On the same stable machine, perform 10 tests and finally get the average.
4. Test environment: CPU: Intel(R) Core i5-3210M, RAM: 12GM, system: win10(x64)
   

Test process

Make a test variable

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

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

Write corresponding test functions

I use the code for measuring and executing time()and()To test.

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

Foreach loop test:

function testForeach(testArrs){
 ('foreach');
 var newArrs = [];
 (function(i){
 (i);
 });
 ('foreach');
}

For loop without declaring variables:

function testNoDeclare(testArrs){
 ('no declare');
 var newArrs = [];
 for(var i = 0;i<;i++){
 (i);
 }
 ('no declare');
}

How to write variable declarations

function testUseDeclare(testArrs){
 ('use declare');
 var newArrs = [];
 for(var i = 0,len = ;i<len;i++){
 (i);
 }
 ('use declare');
}

Execute test functions

Executing test functions is very simple here, just call the function

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

Test results

After 10 tests, the following results were obtained

I wonder if the result unexpectedly happened to you? I didn’t expect that the most common writing method is the most efficient. Why? I didn't understand it, so I'll tell me if anyone knows it, but I guess the way to write a statement is meaningless. becauselen = thisIt may have been cached, so it doesn't make sense for us to declare a len variable to store it.

Finally, all the test codes are attached, copy them to your computer and you can test them directly. If there is any unreasonable point, please tell me.

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

Special writing method for loop

Let’s talk about the code I didn’t understand at the beginning of the article, and let’s review the most familiar for loop syntax before. The basic syntax of a for loop is:

for (Statement 1; Statement 2; Statement 3)
{
Execution code block
}

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

If we use a for loop to output 1 to 10, we can write this:

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

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

for(var i=10;i--;){
(i);
}

When I first read it, I was also confused. How could I write it like this? Statement 2 puts the loop condition, what is the judgment condition i-? Actually, in statement 2, if the true loop is returned, it will continue to execute. When 0, null, undefined, false,'',"" is used as a conditional judgment, the result is false, which means that when i-to 0 is false, the loop terminates.

Go back to the code at the beginning of the article

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

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

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

In fact, it is to put the judgment and assignment together, and assign values ​​while looping. Isn't it quite simple?

Summarize

The above is the entire content of this article. I hope that the content of this article will be of some help to everyone in learning or using Javascript. If you have any questions, you can leave a message to communicate.