The difference between for/for in/for of in js - performance test and in-depth comparative analysis

Foreword:
When working on a project, I found that for a large amount of data, different loop methods actually have quite a big difference in time and performance. If there are only a few dozen pieces of data, it doesn’t matter which one is used. For example, if there is little data and performance is not considered, it’s cool to use for of directly, and you can get the value directly, so different scenarios still need to be analyzed differently.

This article is to do a performance test for these types of loops, hoping to help you a little bit, and you can quickly make a performance judgment when you encounter some problems.

Start the test:
First, for the test, create an array of length 10 million, and then give them fill(0).

//let arr=new Array(10000000)创造长度为一千万的数组
let arr=new Array(10000000).fill(0)


1. The performance of for and while under different declarations
① Use var declaration, for and while are almost 24ms. (Use while for uncertain number of loops)

//用for循环-----使用console自带计算时间的属性
console.time("for")
for(var i=0,i<arr.length,i++){}
console.timeEnd("for")

//输出for:24.49ms

//用while循环
console.time("while")
var i=0
for(i<arr.length){i++}
console.timeEnd("while")

//输出while:24.042ms

结论:在使用var时,for,while耗时都是24ms左右,性能差不多。


② Use let statement, for performance is better, for statement is about 9ms, var statement is about 32ms.

//用for循环
console.time("for")
for(let i=0,i<arr.length,i++){}
console.timeEnd("for")

//输出for:9.38379ms

//用while循环
console.time("while")
let i=0
for(i<arr.length){i++}
console.timeEnd("while")

//输出while:32.566162ms

结论:在使用let声明时,for性能更好。


③forEach is 134.74ms

//用forEach
console.time("forEach")
arr.forEach(function(item){})
console.timeEnd("forEach")

//输出forEach:134.7458ms

Summary:
1. Use var to declare, for and while are similar, both are about 24ms. (Use while for uncertain number of loops)

2. Use let statement, for performance is better, for statement is about 9ms, var statement is about 32ms.
Principle : There is no global variable that is not released. Because let is block-level scope, for can be released after the end.


2. for in
is generally used to traverse objects, and the key is the key, which is the key name.

//用for in
console.time("for in")
for (let key in arr){}
console.timeEnd("for in")

//输出for in:3593.74ms


We can see that compared with the above loop method, for9ms, the performance of for in is the worst, close to more than 3600 ms, and the speed difference is more than 400 times .
Because it will iterate all private and public properties, the prototype chain level-by-level check is very performance-consuming.
There are many problems : symbol cannot be iterated, number of iteration order is priority, poor performance, time-consuming, all enumerable attributes will be iterated, private/shared.

3. for of 
is generally used to traverse the array, and the value is looped out, which is the element value.

//用for of
console.time("for of")
for (const val of arr){console.log(val)}
console.timeEnd("for of")

//输出for of:327.006ms

The performance test takes more than 300 ms.
for...of cannot loop ordinary objects, it needs to be used in conjunction with Object.keys(), which is a bit redundant.
Bottom layer : traverse according to the iterator specification.
Iterator specification: There must be a next method, and each execution will get a value in the structure. There are done and value attributes.
done: whether the iteration is completed, value: the value obtained each time.

The above is a summary of personal research and lectures. This is the code about iterators in the previous lecture summary. I feel very clear about myself, and I will release it for your reference.

 Final summary:
 

1. For/while
is declared with var, for and while are similar, both are about 24ms . (Use while for uncertain number of cycles)
Use let statement, for performance is better , for statement is about 9ms , var statement is about 32ms.
foreach is about 130ms.

2. for in
for in is generally used to traverse objects , and the key is the key , which is the key name.
The performance is the worst. About 3600ms, which is 400 times different from for. When the amount of data is large, avoid stepping on the pit and use it with caution.
Because it will iterate all private and public attributes, the prototype chain level-by-level search consumes a lot of performance.
Problem: The performance is poor, symbols cannot be iterated, and the number of iteration order takes precedence.

3. for of 
is generally used to traverse the array , and the value is looped out , which is the element value. Normal objects cannot be looped.
Performance: about 327ms .
Bottom layer: traverse according to the iterator specification.
Iterator specification: There must be a next method, and each execution will get a value in the structure. There are done and value attributes.
done: whether the iteration is completed, value: the value obtained each time.

Guess you like

Origin blog.csdn.net/m0_71981318/article/details/125741907