使用 for-of 遍历对象是不是会轻松一点？
如何遍历对象，一般来说都会想到 for-in
let obj = { a: 1, b: 2, c: 3, d: 4 } for( let k in obj ){ console.log(k, obj[k]); } // 输出结果 // a 1 // b 2 // c 3 // d 4 但是当有一些继承关系的时候，就有些麻烦了，遍历的时候会把继承的属性也遍历出来，这就得加些判断了
let newObj = Object.create(obj) newObj.e = 5; newObj.f = 6; for( let k in newObj ){ console.log(k, newObj[k]); } // 输出结果 // e 5 // f 6 // a 1 // b 2 // c 3 // d 4 for( let k in newObj ){ if( newObj.hasOwnProperty(k) ){ console.log(k, newObj[k]); } } // 输出结果 // e 5 // f 6 当然多了一层缩进，有一点麻(蛋)烦(疼)，所以可以省略一层，变成下面这样
for( let k in newObj ) if( newObj.hasOwnProperty(k) ){
console.log(k,newObj[k]);
}
es6中有三类结构生来就具有Iterator接口：数组、类数组对象、Map和Set结构。
var arr = [1,2,3,4];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); //{ value: 1, done: false }
console.log(iterator.next()); //{ value: 2, done: false }
console.log(iterator.next()); //{ value: 3, done: false }
console.log(iterator.next()); //{ value: 4, done: false }
console.log(iterator.next()); //{ value: undefined, done: true }
至于对象没有布置iterator接口的原因。是因为我们说的数组，Map等结构中的成员都是有顺序的，即都是线性的结构，而对象，各成员并没有一个确定的顺序，所以遍历时先遍历谁后遍历谁并不确定。所以，给一个对象部署iterator接口，其实就是对该对象做一种线性转换。如果你有这种需要，就需要手动给你的对象部署iterator接口咯~
let obj = {
data: [ 'hello', 'world' ],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++],
done: false
};
} else {
return { value: undefined, done: true };
}
}
};
}
}
可以看到，Symbol.iterator会返回一个对象，这就是一个遍历器对象，而作为遍历器对象，其必须具备的特征就是必须具备next()方法。
我们还可以据此实现指针结构的数据结构。具体略~
至于可以使用Array.from转换成数组的类数组对象，部署iterator有一种很简单的方法，即直接使用数组的[Symbol.iterator]接口。
obj.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
当然，不知道你们看到next是否想到了es6的一个新玩意儿，即Generator函数。用Generator函数来实现Symbol.iterator接口，事半功倍。
其次，其它调用到遍历器的操作还有解构赋值、扩展操作符、其它任何接受数组作为参数的场合，如：
-
for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如）
Promise.all()
Promise.race()遍历器对象除了必须布置next方法以外，还有2个可选方法。return()和throw()。当一个解构在遍历的时候异常提前退出(比如break,continue或者出错)的时候，就会调用return方法，其次，return方法必须返回一个对象。
至于throw方法，则是用于抛出错误，Generator.prototype.throw这里不展开讲了，感兴趣的可以搜索一下。
for of循环有很多优点，比如不像for...in一样只遍历键名（甚至包括原型链上的键），而且不像foreach不能跳出循环。并且for...of为各种数据结构提供了一个统一的遍历方法。
foreach无法终止循环，当通过break来终止循环时会报错 Illegal break statement。
复习就到此为止了，接下来来尝试一些其它的方式
在 ES6 中提供了 for-of，可以很方便的遍历数组和类数组，但是却不能遍历对象，这是为什么，与 for-in 仅仅相差一个单词，用途也是遍历，为什么却不能使用在对象上？
查资料后得知，原来 ES6 中引入了 Iterator，只有提供了 Iterator 接口的数据类型才可以使用 for-of 来循环遍历，而 Array、Set、Map、某些类数组如 arguments 等数据类型都默认提供了 Iterator 接口，所以它们可以使用 for-of 来进行遍历
那么原因清楚了，该怎么解决呢？能不能为对象已经其它的一些数据类型提供 Iterator 接口呢
答案是可以的，ES6 同时提供了 Symbol.iterator 属性，只要一个数据结构有这个属性，就会被视为有 Iterator 接口，接着就是如何实现这个接口了，如下就是一个最简实现：
newObj[Symbol.iterator] = function(){ let index = 0 , self = this , keys = Object.keys( self ) ; return { next(){ if( index < keys.length ){ return { value: self[keys[index++]] , done: false }; } else{ return { value: undefined , done: true } } } }; }; 仔细看一下发现就会发现 Symbol.iterator 接口其实是一个 Generator 函数，那么就可以简化代码：
newObj[Symbol.iterator] = function* (){ let keys = Object.keys( this ) ; for(let i = 0, l = keys.length; i < l; i++){ yield this[keys[i]]; } } for(let v of newObj){ console.log( v ); } // 输出结果 // 5 // 6 值得注意的是 Object.keys 碰巧解决了之前 for-in 遇到的继承问题
这样满足了我们的期望，使用 for-of 来遍历对象，但是好像哪里不对，我们遍历对象时一般都是期望同时输出 key 和 value 的，这样调整一下代码
newObj[Symbol.iterator] = function* (){ let keys = Object.keys( this ) ; for(let i = 0, l = keys.length; i < l; i++){ yield { key: keys[i] , value: this[keys[i]] }; } } for(let v of newObj){ console.log( v ); } // 输出结果 // {key: "e", value: 5} // {key: "f", value: 6} 这样返回了一个对象，似乎又很不舒服，我们能不能尝试一些解构赋值呢。。。
for(let {key, value} of newObj){ console.log(key, value ); } // 输出结果 // e 5 // f 6 这样似乎非常完美了。。。
但回过头来看，你觉得轻松了一点么？
拓展： 在 class 中使用 Symbol.iterator
class User{ constructor(name, gender, lv){ this.name = name; this.gender = gender; this.lv = lv; } *[Symbol.iterator](){ let keys = Object.keys( this ) ; for(let i = 0, l = keys.length; i < l; i++){ yield { key: keys[i] , value: this[keys[i]] }; } } } let zhou = new User('zhou', 'male', 1); for(let {key, value} of zhou){ console.log(key, value); } // 输出结果 // name zhou // gender male // lv 1