ES6 for...of循环

一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for…of循环遍历它的成员。也就是说，for…of循环内部调用的是数据结构的Symbol.iterator方法。
for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

数组

for…of循环可以代替数组实例的forEach方法。
JavaScript 原有的for…in循环，只能获得对象的键名，不能直接获取键值。ES6 提供for…of循环，允许遍历获得键值。

const arr = ['red', 'green', 'blue'];
//	for...of
for(let v of arr) {
  console.log(v); // red green blue
}
// for...in 
for (let v in arr) { 
  console.log(v); // 0 1 2
  console.log(arr[v])//red green blue
}
//	forEach
arr.forEach(function (element, index) {
  console.log(element); // red green blue
  console.log(index);   // 0 1 2
});

for…in循环读取键名，for…of循环读取键值。for…of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟for…in循环也不一样。

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

上面代码中，for…of循环不会返回数组arr的foo属性。

与其它遍历语法的比较

forEach循环：无法中途跳出循环，break命令或return命令都不能奏效。
for…in循环啊有几个缺点：
1. 数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
2. for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
3. 某些情况下，for…in循环会以任意顺序遍历键名。
总之，for…in循环主要是为遍历对象而设计的，不适用于遍历数组。
for…of循环相比上面几种做法，有一些显著的优点。
1.
有着同for…in一样的简洁语法，但是没有for…in那些缺点。
2.
不同于forEach方法，它可以与break、continue、和return配合使用。
3.
提供了遍历所有数据结构的统一操作接口。

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

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