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) } 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