Which type of loop is fastest in JavaScript? Comparison of several for loops-JS Tutorial-php.cn

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 theforloop, such asfor,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 thatfor(in reverse order) is the fastest of allforloops. 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 accuracyhere.

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('⏳');

Copy after login

The reason for this result is very simple. In the code, the forward and reverseforloops take almost the same time, with a difference of only 0.1 milliseconds. The reason is thatfor(reverse order) only needs to calculate the starting variablelet i = arr.lengthonce, while in the forwardforloop, it is The conditioniis 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.)


       AndforEachis a method of theArrayprototype, which is different from the ordinaryforCompared to loops,forEachandfor…oftake more time to iterate through the array. (Translator's Note: But it is worth noting that bothfor…ofandforEachobtain 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 theforloop wherever we need to run a piece of code an approved number of times. The most basicforloop 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).forEachalso allows an optional parameterthisin 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 */
        
         Copy after login
        
       
       It should be noted that if we want to useforEach, we cannot use JavaScript's short-circuit operators (||, &&...), that is, we cannot skip in each loop or end the loop.
       3.for…of
       ##for…ofIt is standardized in ES6 (ECMAScript 6). It creates a loop over an iterable object (such asarray,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' }
        
         Copy after login
        
       
       It should be noted that please do not use
       for…ofin the generator, even if thefor…ofloop terminates early. After exiting the loop, the generator is closed and an attempt is made to iterate again without producing any further results.
       4.forin
       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 }
        
         Copy after login
        
       
       for…of和for…in
       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' }
        
         Copy after login
        
       
       
       结论
       
        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!