知道哪个for循环或迭代器适合我们的需求，避免我们犯一些影响应用程序性能的低级错误。
由 ArtemSapegin 上传至 Unsplash
JavaScript 是 Web 开发领域的一棵“常青树”。 JavaScript 框架（如 Node.js、React、Angular、Vue 等）和原生 JavaScript 都拥有庞大的粉丝群。 我们来谈谈现代 JavaScript。 循环仍然是大多数编程语言的重要组成部分，现代 JavaScript 为我们提供了许多迭代或循环值的技巧。
但问题是我们是否真的知道哪个循环或迭代最适合我们的需求。 for循环有很多变体，例如for、for（降序）、for...of、forEach、for...in、for...await。 本文将讨论这一点。
哪个循环更快？
答案显然是：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('⏳');
造成这个结果的原因很简单。 代码中，乱序和逆序for循环花费的时间几乎相同，仅相差0.1纳秒。 原因是for（逆序）只需要计算初始变量leti=arr。 length 一次，并且在乱序 for 循环中，它会在每个变量减少后检查条件 i。 这个微小的差异并不是很重要，您可以忽略它。 （译者注：在数据量较小或者时间不敏感的代码上我们可以忽略它，而根据译者的测试，当数据量扩大时，比如数十亿、数千亿等，差异就明显增大，我们需要考虑时间对应用程序性能的影响。）
而 forEach 是 Array 原型的一种方法。 与普通的 for 循环相比，forEach 和 for...of 需要花费更多的时间来迭代字段。 （译者注：但值得注意的是，for...of 和 forEach 都是从对象中获取数据，但原型却没有，所以没有比较。）
循环的类型以及我们应该在哪里使用它们 1. For 循环（随机播放和倒序）
我想也许你们都应该非常熟悉这个基础周期。 只要我们需要按照批准的次数运行一段代码，我们就可以使用for循环。 最基本的 for 循环运行速度最快，所以我们每次都应该使用它，对吧？ 不，性能不仅仅是唯一的标准，代码的可读性往往更重要，只是让我们选择适合我们应用程序的变体。
2. 对于每个
该方法需要接受一个反弹函数作为输入参数，遍历链表的每个元素，并执行我们的反弹函数（将元素本身及其索引（可选参数）作为参数提供给反弹函数）。 forEach 还允许在bounce 函数中使用可选参数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 在 ES6 (ECMAScript6) 中标准化。 它会为可迭代对象（如数组、映射、集合、字符串等）创建循环，但有一个突出的优点，那就是极好的可读性。
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...ofjavascript数组的定义，尽管 for...of 循环会提前终止。 退出循环后，生成器关闭并尝试另一次迭代，但不会形成任何进一步的结果。
4.福林
for...in 在对象的所有可枚举属性上迭代指定变量。 对于每个不同的属性，for...in 语句除了数字索引之外还返回用户定义属性的名称。 因此javascript数组的定义，遍历链表时最好使用带有数字索引的传统for循环。 由于 for...in 语句会迭代链表元素以外的用户定义属性，所以即使我们改变链表对象（比如添加自定义属性或方法），情况仍然如此。
const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';
for (let i in details) {
fullName += details[i] + ' '; // fullName: john doe
}
为...的和为...在
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'
}
由 TineIvanič 上传至 Unsplash Inference
最后，给你一个明智的建议——优先考虑可读性。 尤其是当我们开发复杂结构的程序时，更需要这样做。 事实上，我们还应该注重性能。 尽量避免添加不必要和多余的花哨代码，因为这有时可能会对程序的性能产生严重影响。 享受编码的乐趣。
译者注
在翻译器的实际测试中发现：
霍弗罗斯特翻译
-EOF-
