JavaScript中哪种类型的循环最快？几种for循环对比(2)-木庄网络博客

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

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

结论

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循环对比的详细内容，更多文章请关注木庄网络博客！

返回前面的内容