首先了解for ... in 和 for ...of的区别：

遍历数组时

for (let item in arr) : item表示索引值

for(let item of arr) : item表示当前索引值对应的元素

var arr = ['red','yellow','green'];
for (let item in arr){
	console.log(item);// 0 1 2
}
for (let item of arr){
	console.log(item);//red yellow green
}

for(let item in obj)可以遍历普通对象，item表示key值

for(let item of obj)不能遍历普通对象

var obj = {
	name: 'Jack',
	age: 18
}
for (item in obj){
	console.log(item);//name age
}

如for ...of 能遍历的实例对象下必须有Symbol.iterator属性，该属性的值是函数，执行该函数返回一个对象

{

next: function(){

return {value : , done: }

}

}

当用for ... of遍历对象时，实际访问的是对象的Symbol.iterator()，不断执行next(),取得value对应的值，当done的值是true时，表示遍历完成。

实例数组对象下有Symbol.iterator属性，let ...of 遍历时，得到的是value属性对应的值，当done的值是true时，遍历结束。

'use strict'
var arr = ['red','yellow','green'];
console.log(arr[Symbol.iterator]);//function values() { [native code] }
var It = arr[Symbol.iterator]();
console.log(It.next());//{value: "red", done: false}
console.log(It.next());//{value: "yellow", done: false}
console.log(It.next());//{value: "green", done: false}
console.log(It.next());//{value: undefined, done: true}

如果let ... of 想要遍历一般对象，就必须给一般对象，添加Symbol.iterator属性

'use strict'
var obj = {
	name: 'Jack',
	age: 18
}
obj[Symbol.iterator] = function(){
	var i = 0;
	var arr = Object.keys(this);
	var length = arr.length;
	return{
		next:function(){
			return{
				value:obj[arr[i++]],
				done:i>length
			}
		}
	}
}
for(let item of obj){
	console.log(item);//Jack 18
}

只是通过Object.keys()，for...of也能遍历一般对象。因为let ... of能够遍历数组

'use strict'
var obj = {
	name: 'Jack',
	age: 18
}
var arr = Object.keys(obj);
console.log(arr);//[ 'name', 'age' ]
	
for(let item of arr){
	console.log(obj[item]);//Jack 18
}

let ... of 遍历类数组:

'use stric';
var obj = {
	0: 'red',
	1: 'yellow',
	2: 'green',
	length: 3
}
obj[Symbol.iterator] = Array.prototype[Symbol.iterator].bind(obj);
for(let item of obj){
	console.log(item);//red yellow green
}