for...of 遍历对象属性

Author Avatar
wanglinzhizhi Mar 18, 2017
var myObject = {
a: 2,
b: 3
}
Object.defineProperty(myObject, Symbol.iterator, {
enumerable: false,
writable: false,
configurable: true,
value: function () {
var o = this;
var idx = 0;
var ks = Object.keys(o)
return {
next: function () {
return {
value: o[ks[idx++]],
done: (idx > ks.length)
};
}
}
}
})
var it = myObject[Symbol.iterator]();
it.next()
it.next()
it.next()
it.next()
for (var item of myObject) {
console.log(item)
}
/*version2*/
var myObject = {
a: 2,
b: 3,
[Symbol.iterator]: function () {
var o = this;
var idx = 0;
var ks = Object.keys(o)
return {
next: function () {
return {
value: o[ks[idx++]],
done: (idx > ks.length)
};
}
}
}
}
for (var item of myObject) {
console.log(item)
}

和数组不同, 普通的对象并没有内置@@iterator, 所以无法自动完成for...of遍历. 之所以要这样做, 有许多非常复杂的原因, 不过简单来说, 这样做是为了避免未来的对象类型.

Note1: 其实遍历对象的问题我们有很多种解法,临时想到的有:

  • Object.keys()
  • Object.values()
  • Object.entries()
  • Object.getOwnPropertyNames()

and so on..

这里提供的是更底层的玩儿法:)

如果我们想遍历的对象的属性(值,而不是属性名),可以自定义@@iterator 来实现对象的for..of遍历.

Update Note: 无意间发现vue2中v-for 循环更新中, 将vue1中只能对数组的遍历改变为了对任意对象的遍历. 没看过vue2 的v-for源码实现,不过个人猜测应该差不多和上述方法差不多 :)








晚安,银河系:)

by wanglinzhizhi