ECMAScript 6 学习之路 （ 七 ）迭代器和 for-of 循环

迭代器和 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);
});

forEach虽然简洁了不少，但是不能使用break,continues,return

for..in也可以遍历数组

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

这是一个糟糕的选择!

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

   1. 作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性,举个例子,如果你的数组中有一个可枚举的类型a.name,那么循环将额外执行一次,遍历到名为name的索引,甚至数组原型链上的属性都能被访问到
2. 这段代码可能按照 随机顺序遍历数组
3. for-in 这个代码是为普通对象设计的,不适用于数组的遍历

所以平时我们最好不要使用for-in遍历数组

主角登场： for...of

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

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

注意： 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]);
}

与其说使用 Object.keys() 还不如使用 for-in

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