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

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

但是问题是,是否真的知道哪个循环或迭代性能最佳。有很多在for循环可供选择,forfor(逆序)for...offorEach。下面我们就来逐一了解。

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) ⏳");// forEachconsole.time("forEach⏳ ");arr.forEach((v) => v);console.timeEnd("forEach⏳ ");// for...ofconsole.time("for...of⏳ ");for (const v of arr) {}console.timeEnd("for...of⏳ ");

运行后的结果如下:

for(逆序) ⏳: 3.375msfor(正序) ⏳: 2.592msfor(正序2) ⏳: 2.259msforEach⏳ : 4.149msfor...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循环,forEachfor…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 : 0point : 1coding : 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 慢,不方便。

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

©著作权归作者所有:来自51CTO博客作者五月枫的原创作品,如需转载,请注明出处,否则将追究法律责任

更多相关文章

  1. 流程控制之while循环
  2. 流程控制之for循环
  3. Go语言基础之流程控制
  4. 【DB笔试面试444】Oracle中PL/SQL的流程控制语句包括哪些?
  5. 【递归】JavaScript实现99乘法表的编写(双层for循环与递归方法)
  6. 提高前端代码的质量
  7. Python - for 循环
  8. Python - while 循环
  9. for循环

随机推荐

  1. Android中MaterialDesign使用 (四)Coordi
  2. Android(安卓)系统字体规范与应用探索
  3. Android(安卓)中的ellipsize
  4. Android4.4系统源代码百度网盘下载
  5. 读书笔记(一)---GoogleAndroid开发入门指南
  6. android中去掉标题栏和状态栏
  7. 【Android學習專題】搭建Android NDK环境
  8. Android 5.1源代码与Nexus设备工厂镜像下
  9. RatingBar
  10. android timed gpio (linux 3.0.0) 受时