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 루프 또는 반복자가 무엇인지 이해하세요.

어떤 루프가 더 빠릅니까?

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

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

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

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