【译】JavaScript 中几种循环遍历方式对比

JavaScript 在 Web 开发上占有举足轻重的地位，无论是 NodeJS、React、Angular、Vue 等各种 JavaScript 框架， 还是 vanilla JS（译者注：这是个梗，指原生JavaScript） 都有大量的粉丝簇拥。循环作为编程语言中不可或缺的一部分，JavaScript 提供了多种支持循环遍历的方法，比如 for、 for(reverse)、 for...of、 foreach、 for...in、 for...await。但是问题是，如何在这些的循环遍历方法中，选择最适合我们需求的那个呢？这就是本文将要展开讨论的问题。

哪种循环遍历方法最快?

答案是：for(reverse)

在个人电脑上，对这几种遍历方式进行测试，最终得出了 for(reverse) 是最快的循环遍历。测试的方法是，遍历一个有 100 万个元素的数组，计算出整个过程的耗时，代码如下：

const million = 1000000; 
const arr = Array(million);
console.time('⏳');

for (let i = arr.length; i > 0; i--) {} // for(reverse) :- 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('⏳');

这里 for 的正向遍历和反向遍历耗时几乎是一样的，只有 0.1ms 的差异。原因是 for(reverse) 只进行一次 let i = arr.length , 而在 for 中每次都要进行 i < arr.length 判断，针对这点细微的差别可以忽略。和 for 相比，foreach 和 for...of 在数组遍历过程会更耗时。

不同循环遍历方法的应用场景

for 循环

for 是大家较为熟悉的循环遍历方式，而且它的遍历速度是最快的，那是不是什么场景都推荐用 for 呢？答案是否定的，因为除了要考虑性能因素之外，代码的可读性通常更为重要。

forEach

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}
things.foreach(callbackFun); 

o/p:- have - 0
      fun - 1
      coding - 2

forEach 在数组遍历过程中，不能被 break 或 return 提前结束循环。

for ... of

for...of 是 ES6 支持的特性，用于遍历可迭代的对象，例如 String、Array、Map 和 Set 等，它对于代码可读性比较好。

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

for...in

for...in 可以遍历访问对象的所有可枚举属性。当用 for...in 访问数组的时候，除了返回数组的索引之外，数组上的用户自定义属性也会被返回，所以要避免用 for...in 遍历数组。

const array = ['k', 'o', 'o'];

array.koo = true;

for (const key in array) {
  console.log(key); // 顺次打印 '0', '1', '2', 'koo'
}

总结

• for 速度最快, 但可读性差
• foreach 速度快, 可控制属性
• for...of 比较慢, 但好用
• for...in 比较慢, 最不好用

最后给一个建议，把代码的可读性放在第一位。当开发一个复杂的结构（系统）时，代码可读性是必不可少的，但是也应该关注性能。尽量避免在代码中添加不必要的东西，以减少对应用程序性能造成的影响。

参考阅读

• Using 'ForOfStatement' is not allowed
• Array iteration methods summarized
• Airbnb JavaScript Style Guide

关注公众号