使用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 是通过什么方式来遍历元素的