Which type of loop is fastest in JavaScript? Comparison of several for loops

JavaScript is the “evergreen tree” in the field of web development. Whether it is JavaScript frameworks (such as Node.js, React, Angular, Vue, etc.) or native JavaScript, they all have a very large fan base. Let’s talk about modern JavaScript. Loops have always been an important part of most programming languages, and modern JavaScript gives us many ways to iterate or loop over values.

But the question is, do we really know which loop or iteration is best for our needs. There are many variations of the for loop, such as for, for (reverse order), for…of, forEach, for…in, for…await. This article will discuss these.

Understand which for loop or iterator is suitable for our needs to prevent us from making some low-level mistakes that affect application performance.

Which loop is faster?

The answer is actually: for(reverse order)

The most surprising thing to me is that when I am on my local computer After testing it, I had to accept the fact that for (in reverse order) is the fastest of all for loops. Below I will give an example of performing a loop through an array containing more than a million elements.

Statement : console.time() The accuracy of the results depends heavily on the system configuration on which we are running the test. You can learn more about accuracy here.

const million = 1000000; 
const arr = Array(million);

// 注：这是稀疏数组，应该为其指定内容，否则不同方式的循环对其的处理方式会不同：
// const arr = [...Array(million)]

console.time('⏳');
for (let i = arr.length; i > 0; i--) {} // for(倒序)  :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for          :- 1.6ms
arr.forEach(v => v)                     // foreach      :- 2.1ms
for (const v of arr) {}                 // for...of     :- 11.7ms
console.timeEnd(&#39;⏳&#39;);

The reason for this result is very simple. In the code, the forward and reverse for loops take almost the same time, with a difference of only 0.1 milliseconds. The reason is that for (reverse order) only needs to calculate the starting variable let i = arr.length once, while in the forward for loop, it is The condition i<arr.length> is checked every time the variable is incremented. This subtle difference is not very important and you can ignore it. (Translator's note: We can ignore it when the data volume is small or the code is not time-sensitive. However, according to the translator's test, when the data volume expands, such as billions, hundreds of billions, etc., the gap will increase significantly. , we need to consider the impact of time on application performance.) </arr.length>

And forEach is a method of the Array prototype, which is different from the ordinary for Compared to loops, forEach and for…of take more time to iterate through the array. (Translator's Note: But it is worth noting that both for…of and forEach obtain data from the object, but the prototype does not, so there is no comparison.)

Types of loops, and where we should use them

1. For loop (forward and reverse order)

I think maybe everyone should be very familiar with this basic cycle. We can use the for loop wherever we need to run a piece of code an approved number of times. The most basic for loop runs the fastest, so we should use it every time, right? No, performance is not just the only criterion. Code readability is often more important. Let us choose the variant that suits our application.

2. forEach

This method needs to accept a callback function as an input parameter. Iterate over each element of the array and execute our callback function (passing the element itself and its index (optional) as arguments). forEach also allows an optional parameter this in the callback function.

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}
things.foreach(callbackFun); 
/* 输出   have - 0
        fun - 1
        coding - 2 */

It should be noted that if we want to use forEach, we cannot use JavaScript's short-circuit operators (||, &&...), that is, we cannot skip in each loop or end the loop.

3. for…of

##for…of It is standardized in ES6 (ECMAScript 6). It creates a loop over an iterable object (such as array, map, set, string, etc.) and has a The outstanding advantage is excellent readability.

const arr = [3, 5, 7];
const str = 'hello';
for (let i of arr) {
   console.log(i); // 输出 3, 5, 7
}
for (let i of str) {
   console.log(i); // 输出 'h', 'e', 'l', 'l', 'o'
}

It should be noted that please do not use

for…of in the generator, even if the for…of loop terminates early. After exiting the loop, the generator is closed and an attempt is made to iterate again without producing any further results.

4. for in

for…in 会在对象的所有可枚举属性上迭代指定的变量。对于每个不同的属性，for…in 语句除返回数字索引外，还将返回用户定义的属性的名称。 因此，在遍历数组时最好使用带有数字索引的传统 for 循环。 因为 for…in 语句还会迭代除数组元素之外的用户定义属性，就算我们修改了数组对象（例如添加自定义属性或方法），依然如此。

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';
for (let i in details) {
    fullName += details[i] + ' '; // fullName: john doe
}

<span style="font-size: 16px;">for…of</span> 和 <span style="font-size: 16px;">for…in</span>

for…of 和 for…in 之间的主要区别是它们迭代的内容。for…in 循环遍历对象的属性，而 for…of 循环遍历可迭代对象的值。

let arr= [4, 5, 6];
for (let i in arr) {
   console.log(i); // '0', '1', '2'
}
for (let i of arr) {
   console.log(i); // '4', '5', '6'
}

结论

• for 最快，但可读性比较差
• foreach 比较快，能够控制内容
• for...of 比较慢，但香
• for...in 比较慢，没那么方便

最后，给你一条明智的建议 —— 优先考虑可读性。尤其是当我们开发复杂的结构程序时，更需要这样做。当然，我们也应该专注于性能。尽量避免增添不必要的、多余的花哨代码，因为这有时可能对你的程序性能造成严重影响。祝你编码愉快。

译者注

在译者的实际测试中，发现：

• 不同浏览器甚至不同版本，结果会有不一样（颠倒，例如 Firefox 对原生 for-loop 似乎不太友好，Safari 极度喜欢 while）
• 不同平台操作系统处理器，结果会有不一样

英文原文地址：https://medium.com/javascript-in-plain-english/which-type-of-loop-is-fastest-in-javascript-ec834a0f21b9

原文作者：kushsavani

本文转载自：https://juejin.cn/post/6930973929452339213

译者：霜羽 Hoarfroster

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Which type of loop is fastest in JavaScript? Comparison of several for loops. For more information, please follow other related articles on the PHP Chinese website!