关于ES6中for...of和for..in得问题

整理了一下关于ES6中for…in和for…of得笔记

for…in…循环读取键名，for…of…循环读取键值。
如果要通过for…of…循环，获取数组索引，可以借助数据实例的entries方法和keys方法。

set 、map也可使用for…of…循环。

首先，遍历的顺序是按照各个成员被添加进数据结构的顺序。其次，Set 结构遍历时，返回的是一个值，而 **Map 结构遍历时，返回的是一个数组，**该数组的两个成员分别为当前 Map 成员的键名和键值。

计算生成的数据结构：

ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象。

• entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map结构的 Iterator 接口，默认就是调用entries方法。
• keys() 返回一个遍历器对象，用来遍历所有的键名。
• values() 返回一个遍历器对象，用来遍历所有的键值。

类似数组的对象

并不是所有类似数组的对象都具有 Iterator 接口，一个简便的解决方法，就是使用Array.from方法将其转为数组。

对于普通对象，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

for…in循环有几个缺点。

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

总而言之，for…in循环主要是为遍历对象而设计的，不适用于遍历数组。

for…of循环相比上面几种做法，有一些显著的优点：

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

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}

上面的例子，会输出斐波纳契数列小于等于 1000 的项。如果当前项大于 1000，就会使用break语句跳出for…of循环。