es6语法 for...of与for...in

for...of循环

JavaScript 原有的for...in循环，只能获得对象的键名，不能直接获取键值

var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for (let a of arr) {
  console.log(a); // a b c d
}

注：for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性

for...of优点：

• 有着同for...in一样简洁的语法，但没有for...in那些缺点
• 不同于forEach方法，它可以与break，continue，return配合使用
• 提供了遍历器所有数据结构统一操作接口

for...in的缺点

• 数组的键名是数字，但是for...in循环是以字符串作为键名’0’,’1’
• for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键
• 某些情况下，for...in循环会以任意顺序遍历键名

对象

对于普通的对象，for...of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。但是，for...in循环依然可以用来遍历键名

let es6 = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
};

for (let e in es6) {
  console.log(e);
}
// edition
// committee
// standard

for (let e of es6) {
  console.log(e);
}
// TypeError: es6[Symbol.iterator] is not a function

一种解决方法是，使用Object.keys方法将对象的键名生成一个数组，然后遍历这个数组

for (var key of Object.keys(someObject)) {
  console.log(key + ': ' + someObject[key]);
}

另一个方法是使用 Generator 函数将对象重新包装一下

function* entries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

for (let [key, value] of entries(obj)) {
  console.log(key, '->', value);
}
// a -> 1
// b -> 2
// c -> 3