What impact does for loop writing in JavaScript have on running efficiency?

The impact of for loop writing on efficiency

In general, there are two ways to write for loop:

1. No writing How to write a variable declaration: for(var i = 0;i<arr.length;i++){}

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

In addition to the for loop, there is alsoforEach() , there are also articles saying that forEach() is the most efficient, and it is recommended to use forEach(). So which one is more efficient? Let’s do a test and see.

Test plan

The general test plan is as follows:

1. Make a test array variable that holds 40 million.

2. Use two writing methods of for loop and foreach to traverse this test variable.

3. On the same stable machine, conduct 10 tests and finally take the average.

4. Test environment: CPU: Inter(R) Core i5-3210M, RAM: 12GM, system: win10 (x64)
   

Test process

Making a test variable

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

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

Write the corresponding test function

Code to measure and execute time, I use console.time()And console.timeEnd() for testing.

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

foreach loop test:

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

For loop without declared 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;);
}

Writing method with 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(&#39;use declare&#39;);
}

Execute test function

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

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

Test result

After 10 tests, the following results were obtained

foreach	Do not write a statement	Write a statement
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.674 ms
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.098 ms
average	average	average
2414.56ms	720.15ms	755.83ms

I wonder if the result surprised you? I didn’t expect that the most common way of writing is the most efficient. Why? I haven’t figured it out, so if anyone knows, please tell me, but I guess the way the statement is written is meaningless. Because len = arr.length this arr.length may have been cached, so it makes no sense for us to declare a len variable for storage.

Special way of writing for loop

The basic syntax of for loop is:

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

1. Statement 1: Execute before the loop (code block) starts

2. Statement 2: Define the conditions for running the 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:

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

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

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

When I first read it, I was also confused, how could it be written like this? Statement 2 contains the loop condition, and i- is the judgment condition. In fact, in statement 2, if true is returned, the loop will continue to execute. In js, when 0,null,undefined,false,'',"" is used as a conditional judgment, the result is false, which means that when i- reaches 0, it is false, and 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. When it becomes undefined, the loop will be terminated. So if this code is written in ordinary way, it would look like this:

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

In fact, it just puts judgment and assignment together, and assigns values ​​while looping. Isn't it quite simple?

The above is the detailed content of What impact does for loop writing in JavaScript have on running efficiency?. For more information, please follow other related articles on the PHP Chinese website!