Comparison of several usages of for loops in Javascript and how to improve performance

The for loop will be useful when we traverse objects or arrays in js. Let’s take a look at some usage examples of the for loop. The specific operation details are introduced below.

The general writing method is as follows:

for(var i = 0;i< arr.length;i++) {
 var a = arr[i];
 //...
 }

This is a common, positive sequence for loop. Everyone knows the shortcomings of writing this way: taking length from arr and comparing it with i every time is a waste of performance (and if the length of arr changes dynamically, an infinite loop will occur). The way to improve this loop is to use a variable to save arr.length:

for(var i = 0, al = arr.length;i< al;i++) {
 var a = arr[i];
 //...
 }

This can slightly improve performance compared to the first method. If the array is long, it can improve even more.

But writing this way adds an extra variable al, and this variable is only useful when compared with i, which seems a bit tasteless.

If the order of the loop is not important to you, then you can try to loop in reverse order:

for(var i = arr.length-1;i > -1;i--) {
 var a = arr[i];
 //...
 }

In this way, there are fewer variables, and the arr length is cached, and the performance is improved good. But the code here is a bit poorly written (I did it on purpose). First, i = arr.length-1 (it actually takes -1, damn), and then the condition for the loop to continue executing i > -1 , all of which are intolerable to people with mysophobia.

The following is my commonly used reverse order for loop writing method:

for(var i = arr.length;i--;) {
 var a = arr[i];
 //...
 }

This is already very streamlined. The principle needs to be understood: the condition for the for loop to continue to execute is that the judgment between;; must be true, and the i– here, when the first loop comes in, i=arr.length , i- value remains unchanged (why does it remain unchanged? Because you have to find out that i has changed in the for loop body); when i=1, i- - is still 1, but after entering the loop body, it is 0, so The last loop can be executed normally; when i=0, i– is still 0, and 0 is no longer true, so the loop will not continue to execute.

Everyone noticed that in the for loop body of all the codes above, there is a var a = arr[i] , which is used to remove the array item currently looped to. This is actually a waste, and jsLint and others will tell you: don't declare variables in a loop. . .

The for in reverse order can be simplified to this, but I just want the forward order, and it needs to be efficient and have fewer variables. What should I do?

is as follows:

for(var i = 0, a;a = arr[i++];) {
 //...
 }

The advantage of this way of writing is that it is almost inevitable that arr.length is missing. As mentioned above, the array item currently looped to is taken out. The sentence is gone.

Principle:

a = arr[i++] , here as the condition for the loop to be executed, note that there is only one = sign, so This is not a judgment sentence, but an assignment statement, which is to assign arr[i++] to a, and then determine whether a is a true value. I will not go into the principle types of i++ and i–. I will only say that when i++ exceeds the length of the array, the loop must stop, and it really stops here. Why? Because a=arr[i++] , if you get an item that exceeds the length of the array itself, you will only get an undefined, and undefined is a false value, and the loop condition will fail.

Of course, the shortcomings of writing this way are also obvious:

1. When the length of arr changes dynamically, an infinite loop will still occur———— Because we have never cached arr.length.

2. If the loop is an array of numbers, when the item taken out (that is, the value of a) is 0, the loop will be terminated (because 0 is a false value).

3. When an item in the array is a false value (including empty string, 0, null, undefined), the loop will also be terminated

So everyone uses this way of writing It is best to rule out the above situation before using it.

This principle can also be used in reverse order loops.

Finally, a few words of advice:

1. Simplified code does not mean high efficiency!

2. Don’t In order to deliberately simplify the code and lose performance

By the way, here are a few key points to improve the performance of the for loop:

1. Break at the right time! No need to traverse All of them need to add escape conditions!

2. Do not declare variables in the for loop body (it is recommended to assign var once and assign multiple times)

2. Cache the array length and keep as few variables as possible

The above is the detailed content of Comparison of several usages of for loops in Javascript and how to improve performance. For more information, please follow other related articles on the PHP Chinese website!