wujunchuan commented 7 years ago

迭代器和for-of循环

最早的数组遍历方式

var a = ["a", "b", "c"];
for(var index = 0;index < a.length;index++){
  console.log(a[index]);
}

自从ES5发布以后,可以用内建的forEach来遍历数组

var a = ["a", "b", "c"];
a.forEach(function(element) {
    console.log(element);
});

简洁了许多不是,但是你不能使用break来退出循环, 不能使用return语句来返回到外层

当然你也可以使用for循环语法来遍历数组,那么你一定会想到for-in

var a = ["a", "b", "c"];
for(var index in a){
//   console.log(a[index]);
  console.log(typeof index);
}

这是一个糟糕的选择!

赋值给index并不是一个数字,而是一个String,可能无意进行字符串计算,这给编程带来不便

作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性,举个例子,如果你的数组中有一个课枚举的类型a.name,那么循环将额外执行一次,遍历到名为name的索引,甚至数组原型链上的属性都能被访问到

这段代码可能按照 随机顺序遍历数组

for-in 这个代码是为普通对象设计的,不适用于数组的遍历

var a = ["a", "b", "c"];
for(var value of a){
  console.log("for of:"+value);
}

这个方法是最简洁的,并且修复了for-in循环的所有缺点,与forEach()不同的是,它可以正确的响应break,contine,return语句

不仅如此,for-of还可以支持大部分的类数组对象 注意:for-of循环不支持普通对象,但是如果你想迭代一个对象的属性,可以使用for-in循环(这也是它的本职工作)或者内建的Object.keys()方法

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}

那还不如用for-in

for(var prop in  student){
  console.log(prop+': '+student[prop]);
}

wujunchuan commented 7 years ago

今天遇到一个问题,就是因为for-in循环把数组从原型继承来的方法也给遍历出来了,导致循环次数与预期循环次数不一致

解决办法就是用

 for(var index = 0;index < record.length; index++){...}

代替原来的for-in循环

为什么不用for-of,因为ES6才支持这个特性

Little-Chen commented 6 years ago

很有用，感谢楼主

LiuwqGit commented 6 years ago

@wujunchuan 可以在for-in循环的时候添加 hasOwnProperty()方法来过滤掉非自有属性。

Ha0ran2001 commented 2 years ago

不如直接MDN搜索for...of，讲的很详细，以及迭代对象是什么？迭代协议是什么？如何创建迭代器

wujunchuan / wujunchuan.github.io

Javascript中的for-of循环 #11

迭代器和for-of循环