快捷搜索: 王者荣耀 脱发

js的四种for循环的区别和优化写法,与性能区别

forEach和map,await不生效;使用break或continue会报错 for循环、for…in,for…of,支持await, for和for…of中可以使用break和continue; for…in会忽略continue和break

  1. 简单的for循环:需要获取data的长度,常见写法:
for(let i = 0; i < data.length; i++){
 //操作代码
}

假如循环的过程中data的长度不变化,可以先将数组的长度存储起来,可以提高效率,不用每次循环都需要获取长度,如下:

for(let i = 0; len = data.length; i < len; i++){}
  1. for in :循环遍历可以枚举的对象的属性(包括array原型链上所有可枚举的属性,Array在js里面是一个对象,length属于不可枚举属性),不是数组的索引,在此处遍历的顺序不确定,输出的索引是String类型的,即“0”,“1”等;适合用来遍历对象中的属性和稀疏数组
  2. forEach : e5引入的,数组中含有有效值每项执行一次,callback函数依次传入三个参数 item(数组当前项的值)、index(索引,Number类型)、data(数组对象本身),顺序固定,不可调整。执行时,不能阻塞。forEach中删除自身元素,index不能被重置,index也不会随着函数体内对它的增减而变化。 例子:let arr = [1,2,3,4]; arr.forEach((item,index)=>{ consloe.log(item);//输出1,2,3,4 index++; })
  3. for of : Es6引入,可以响应break、continue、return,支持数组、对象、字符、Map、Set等类型遍历,用来遍历可迭代对象。
  4. 补充: es5的其他方法, filter:返回数组元素满足回调函数(判断条件为true),返回的数新数组 map:将原数组的元素处理后再返回,返回的数新数组 reduce:对数组元素依次处理,将上次处理结果作为下次处理的输入。
  5. 性能方面比较 for > forEach > map 原因:for循环没有额外的函数调用栈和上下文,实现最为简单;forEach函数签名中包含了参数和上下文,性能会低于for;map会返回一个新数组,数组的创建和赋值导致分配内存空间。
经验分享 程序员 微信小程序 职场和发展