JavaScript에서 가장 빠른 루프 유형은 무엇입니까? 여러 for 루프 비교

JavaScript는 웹 개발 분야의 "상록수"입니다. JavaScript 프레임워크(예: Node.js, React, Angular, Vue 등)이든 기본 JavaScript이든 모두 매우 큰 팬 기반을 보유하고 있습니다. 최신 JavaScript에 대해 이야기해 보겠습니다. 루프는 항상 대부분의 프로그래밍 언어에서 중요한 부분이었으며, 최신 JavaScript는 값을 반복하거나 반복하는 다양한 방법을 제공합니다.

하지만 문제는 어떤 루프나 반복이 우리의 요구에 가장 적합한지 정말로 알고 있느냐는 것입니다. for 루프에는 for, for(역순), for…of 등 다양한 변형이 있습니다. , forEach , for...in, for...await. 이 기사에서는 이에 대해 논의할 것입니다. for 循环有很多变形，例如 for、for（倒序）、for…of、forEach、for…in、for…await。本文将围绕这些展开讨论。

了解哪一种 for 循环或迭代器适合我们的需求，防止我们犯下一些影响应用性能的低级错误。

究竟哪一种循环更快？

答案其实是： for（倒序）

最让我感到惊讶的事情是，当我在本地计算机上进行测试之后，我不得不接受 for（倒序）是所有 for 循环中最快的这一事实。下面我会举个对一个包含超过一百万项元素的数组执行一次循环遍历的例子。

声明：console.time() 结果的准确度在很大程度上取决于我们运行测试的系统配置。你可以在此处对准确度作进一步了解。

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;);

造成这样结果的原因很简单，在代码中，正序和倒序的 for 循环几乎花费一样的时间，仅仅相差了 0.1 毫秒。原因是，for（倒序）只需要计算一次起始变量 let i = arr.length，而在正序的 for 循环中，它在每次变量增加后都会检查条件 i<arr.length。这个细微的差别不是很重要，你可以忽略它。（译者注：在数据量小或对时间不敏感的代码上，我们大可忽略它，但是根据译者的测试，当数据量扩大，例如十亿，千亿等的数量级，差距就显著提升，我们就需要考虑时间对应用程序性能的影响了。）

而 forEach 是 Array 原型的一个方法，与普通的 for 循环相比，forEach 和 for…of 需要花费更多的时间进行数组迭代。（译者注：但值得注意的是，for…of 和 forEach 都从对象中获取了数据，而原型并没有，因此没有可比性。）

循环的类型，以及我们应该在何处使用它们

1. For 循环（正序和倒序）

我想，也许大家都应该对这个基础循环非常熟悉了。我们可以在任何我们需要的地方使用 for 循环，按照核定的次数运行一段代码。最基础的 for 循环运行最迅速的，那我们每一次都应该使用它，对吗？并不然，性能不仅仅只是唯一尺度，代码可读性往往更加重要，就让我们选择适合我们应用程序的变形即可。

2. forEach

这个方法需要接受一个回调函数作为输入参数，遍历数组的每一个元素，并执行我们的回调函数（以元素本身和它的索引（可选参数）作为参数赋予给回调函数）。forEach 还允许在回调函数中使用一个可选参数 this。

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

需要注意的是，如果我们要使用 forEach，我们不能使用 JavaScript 的短路运算符（||、&&……），即不能在每一次循环中跳过或结束循环。

3. for…of

for…of 是在 ES6（ECMAScript 6）中实现标准化的。它会对一个可迭代的对象（例如 array、map、set、string 等）创建一个循环，并且有一个突出的优点，即优秀的可读性。

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'
}

需要注意的是，请不要在生成器中使用 for……of，即便 for……of 循环提前终止。在退出循环后，生成器被关闭，并尝试再次迭代，不会产生任何进一步的结果。

4. for in애플리케이션 성능에 영향을 미치는 낮은 수준의 실수를 방지하기 위해 우리의 요구 사항에 적합한 for 루프 또는 반복자가 무엇인지 이해하세요.

어떤 루프가 더 빠릅니까?

🎜실제로 대답은 다음과 같습니다. 🎜 for (역순) 🎜🎜제게 가장 놀라운 점은 로컬 컴퓨터에서 테스트한 후 사실 for(역순)는 모든 for 루프 중에서 가장 빠릅니다. 아래에서는 백만 개 이상의 요소가 포함된 배열을 통해 루프를 수행하는 예를 제공합니다. 🎜🎜면책조항🎜: console.time() 결과의 정확성은 테스트를 실행하는 시스템 구성에 따라 크게 달라집니다. 여기에서 정확성을 확인할 수 있습니다. 🎜

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

🎜이 결과의 이유는 간단합니다. 코드에서 정방향 및 역방향 for 루프는 0.1밀리초만 차이가 있을 뿐 거의 동일한 시간이 걸립니다. 그 이유는 for(역순)는 시작 변수 let i = arr.length를 한 번만 계산하면 되고 정방향 시퀀스에서는 for 루프 - 변수가 증가할 때마다 i<arr.length 조건을 확인합니다. 이 미묘한 차이는 그다지 중요하지 않으므로 무시해도 됩니다. (번역자 주: 데이터 양이 적거나 코드가 시간에 민감하지 않은 경우에는 무시할 수 있습니다. 그러나 번역자의 테스트에 따르면 수십억, 수천억 등 데이터 양이 늘어나면 그 격차가 발생합니다. 시간이 애플리케이션 성능에 미치는 영향을 고려해야 합니다)🎜🎜그리고 forEach는 Array 프로토타입의 메서드로 일반 for</code. > 루프에 비해 <code>forEach 및 for...of는 배열을 반복하는 데 더 많은 시간이 걸립니다. (번역자 주: 하지만 for…of와 forEach 모두 객체에서 데이터를 얻지만 프로토타입은 그렇지 않으므로 비교가 없다는 점은 주목할 가치가 있습니다.) 🎜

루프 유형 및 사용해야 하는 위치 🎜

🎜1 . 루프(정방향 및 역순)🎜🎜🎜🎜아마도 모두가 이 기본 루프에 매우 익숙할 것이라고 생각합니다. 승인된 횟수만큼 코드를 실행해야 할 때마다 for 루프를 사용할 수 있습니다. 가장 기본적인 for 루프가 가장 빠르기 때문에 매번 사용해야겠죠? 아니요, 성능이 유일한 기준은 아니며 코드 가독성이 더 중요한 경우가 많으므로 애플리케이션에 적합한 변형을 선택하겠습니다. 🎜🎜2. 🎜forEach🎜🎜🎜🎜이 메소드는 콜백 함수를 입력 매개변수로 허용하고 순회해야 합니다. 각 요소에 대해 배열을 생성하고 콜백 함수를 실행합니다(요소 자체와 해당 인덱스(선택적 매개변수)를 콜백 함수에 전달). forEach는 콜백 함수에서 선택적 매개변수 this를 사용할 수도 있습니다. 🎜

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'
}

🎜forEach를 사용하려면 JavaScript의 단락 연산자(||, &&...)를 사용할 수 없습니다. 즉, 루프를 건너뛰거나 끝낼 수 없습니다. 각 루프에서 . 🎜🎜3. 🎜for…of🎜🎜🎜🎜for…of에 있습니다. ES6(ECMAScript 6)에서 표준화되었습니다. 반복 가능한 객체(예: array, map, set, string 등)에 대해 루프를 생성합니다. , 뛰어난 가독성, 즉 뛰어난 장점을 가지고 있습니다. 🎜rrreee🎜 for…of 루프가 일찍 종료되더라도 생성기에서 for…of를 사용하지 마세요. 루프를 종료한 후 생성기가 닫히고 더 이상의 결과를 생성하지 않고 다시 반복하려고 시도합니다. 🎜🎜4. 🎜의 경우 🎜🎜🎜

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

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

위 내용은 JavaScript에서 가장 빠른 루프 유형은 무엇입니까? 여러 for 루프 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!