for of遍历原理探究以及用来遍历对象

使用for of遍历对象

for of 遍历数组的时候，for of 会自动循环请求数组的迭代器，并自动使用这个迭代器遍历数组的值,而对象并不能使用for of来遍历。如：

var array = [1,4,3,4,5,2]
for(var value of a){
	console.log(value);
}
// 1 4 3 4 5 2

var obj = {prop1:'prop1',prop2:'prop2'}
for(var value of obj){
	console.log(value);
}
//Uncaught TypeError: obj is not iterable

• 如果不在意特定的顺序的话，使用Object.keys( )返回一个array，然后根据获得的对象属性数组来遍历对象。如:

var obj = {prop1:'属性1',prop2:'属性2'};
for(var index of Object.keys(obj)){
	console.log(index); 	//prop1   //prop2
	console.log(obj[index]);	//属性1   //属性2
}

• 这么做和 for in 循环来遍历对象类似，他们的不同是 Object.keys(obj) 不包含obj原型链上的属性，而 for in 循环包含原型链上的属性。

for of遍历的时候，是用来遍历获取值的，所以本人用它来遍历对象，以来探究for of是怎么实现的。

var obj = {
    prop1: '属性1',
    prop2: '属性2',
    [Symbol.iterator]: function () {
        console.log('执行产生迭代器')
        return this;
        },
    next: function () {
        console.log('调用了一次 next()');
        return {
            value: this[objIndexArray[index++]],
            done: index < objIndexArray.length ? false : true
            }
        }
}
var objIndexArray = Object.keys(obj); //通过索引遍历数组
var index = 0;
for (var prop of obj) {
    console.log('prop', prop)
}
//执行产生迭代器
//调用了一次 next()
//prop 属性1
//调用了一次 next()
//prop 属性2
//调用了一次 next()

运行上面一段代码，可以看到，for of 首先请求了一次 obj 的迭代器 [Symbol.iterator] ，然后请求 next , next 返回的 value 为遍历参数 prop 的值，当next返回的属性 done 为 true 之后，结束迭代，也就是遍历完成。

通过上面这个例子，我们可以看出， for of 是通过什么方式来遍历元素的