浅谈JavaScript常见的循环方式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了浅谈JavaScript常见的循环方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2951字，纯文字阅读大概需要5分钟。

内容图文

了解哪个for循环或迭代器适合需求，能够避免犯一些低级错误，进而导致应用性能的降低。

Javascript是web开发的一种新体验。不仅仅是像NodeJS、React、Angular、Vue等JS框架。但是，vanilla JS也有一个庞大的粉丝群。循环一直是大多数编程语言的重要组成部分。最新Javascript提供了很多方法来进行迭代和循环。

但是问题是，是否真的知道哪个循环或迭代性能最佳。有很多在for循环可供选择，for、for（逆序）、for...of、forEach。下面我们就来逐一了解。

const million = 1000000;
const arr = Array(million);

// for（逆序）
console.time("for（逆序） ?");
for (let i = arr.length; i > 0; i--) {}
console.timeEnd("for（逆序） ?");

// for（正序）
console.time("for（正序） ?");
for (let i = 0, len = arr.length; i < len; i++) {}
console.timeEnd("for（正序） ?");

// for（正序2）
console.time("for（正序2） ?");
for (let i = 0; i < arr.length; i++) {}
console.timeEnd("for（正序2） ?");

// forEach
console.time("forEach? ");
arr.forEach((v) => v);
console.timeEnd("forEach? ");

// for...of
console.time("for...of? ");
for (const v of arr) {
}
console.timeEnd("for...of? ");

运行后的结果如下：

for（逆序） ?: 3.375ms
for（正序） ?: 2.592ms
for（正序2） ?: 2.259ms
forEach? : 4.149ms
for...of? : 24.111ms

总结：for（正序）和for（逆序）循环所耗时间相差不到1毫秒。在逆序for循环计算起始变量let i = arr.length，在for（正序）循环中，每次都会检查i < arr.length的检查条件，因此从执行结果看for（正序2）减少了i < arr.length的判断是能够明显改善效率。

因此在编写for循环的时候，应该减少i < arr.length类似的判断

forEach是数组原型的方法，算是比较正常的for循环，forEach和for…of更多的用于数组的迭代。

使用场合

for循环（正序和逆序）

每个人都熟悉这个循环，基本在需要循环的地方就使用for，运行重复的代码块，是传统for循环中最快的。有的时候性能并不是唯一的使用标准，代码可读性也需要考虑，因此算是默认情况下使用的范式。

forEach

接受回调函数作为输入参数，并且对于数组中的每个元素，都会执行此回调函数。forEach回调函数接受当前值和对应的索引。h同样，允许this在回调函数中使用可选参数。

const array = ["dev", "point", "coding"];
const forCallback = (item, index) => {
    console.log(`${item} : ${index}`);
};
array.forEach(forCallback);

运行结果：

dev : 0
point : 1
coding : 2

注意：如果使用forEach，则无法利用Javascript中的短路功能（当在Javascript中使用&&或||这样的逻辑操作符时，它将帮助我们提前终止和或跳过循环的迭代）。

for…of

for…of在ES6（ECMAScript 6）中已标准化。 for…of用于创建一个在可迭代对象（如数组、映射、集合、字符串等）上迭代的循环。此循环的另一个优点是可读性更好。

const arrNumbers = [1, 3, 5];
const arrChats = "devpoint";
console.info("==>arrNumbers");
for (let i of arrNumbers) {
    console.log(i);
}
console.info("==>arrChats");
for (let i of arrChats) {
    console.log(i);
}

注意：即使for...of提前终止，也不要在生成器上重用。退出循环后，将关闭生成器，并再次尝试重复该生成器将不会产生进一步的结果。

结论

• for 最快，可读性差点
• forEach 快速，可控制迭代属性
• for...of 慢，更方便
• for...in 慢，不方便。

最后，虽然效率重要，但是在项目开发中，首选考虑代码的可读性。因为在复杂的应用开发中，代码的可读性比性能更重要，避免不必要的修饰。

内容总结

以上是互联网集市为您收集整理的浅谈JavaScript常见的循环方式全部内容，希望文章能够帮你解决浅谈JavaScript常见的循环方式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端