JS中三类循环对比及性能分析

265 阅读2分钟

for循环、for...in、for...of对比

for 循环 及forEach的底层原理

1、是自己控制循环过程

2、基于var声明的时候 for和while性能差不多【不确定循环次数的情况下用while】

3、基于let声明的时候 for的性能比while更好【原理:没有创造全局不释放变量】 image.png

for循环属于命令式编程(how如何去做 看中的是过程,循环多少轮多少次是可以控制的,还可以改变步长改变循环次数,还可以通过break、continue去结束循环)

forEach属于函数式编程,用起来比for方便,性能比for更差些(what更关注结果,把执行过程封装起来,内部实现封装,自己控制不了循环次数,无法管控过程 不可以中断结束循环。所以会把循环都走一遍)

forEach每循环一次把传进去的回调函数执行一次 还有第二个参数是每一回调执行内部this的指向 不传的情况下默认window

重写forEach

image.png

for...in -(史上最垃圾的循环)

性能非常非常的差。迭代当前对象中所有可枚举的属性(私有属性大部分是可枚举的,公有属性【出现在所属类的原型上的】,也有部分是可枚举的),查找机制一定会搞到原型链上去

image.png

1、遍历顺序以数字优先

2、无法遍历symbol属性(Object.keys()可以拿到所有非symbol属性 Object.getOwnPropertySymbols(拿到所有symbol属性。拼接拿到所有)

3、可以遍历到公有中的可枚举属性

for...of

是按照迭代器规范进行遍历的。性能比for差 但是比for...in强。for...of可以改变内部执行机制 symbol.iterator 数组/部分类数组/Set/Map...【对象没有实现】

image.png

image.png