正常我们遍历对象使用的方法都是for-in或者通过Object.keys()拿到对象key的集合后再使用其他的遍历方法,直接使用for-of会报错
例如:
const obj = {
a: 1,
b: 2,
c: 3
}
for(const item of obj) {
// xxxx
}
//Uncaught TypeError: obj is not iterable
因为对象没有 Iterator 接口
原生具备 Iterator 接口的数据结构有:
- Array
- Map
- Set
- String
- TypedArray
- 函数的 arguments 对象
- NodeList 对象
首先我们需要了解Iterator遍历的过程,在《ECMAScript 6 入门》里面阮大大解释为：
- 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
- 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
- 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
- 不断调用指针对象的next方法，直到它指向数据结构的结束位置。
每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。
接下来我们自行实现对象Iterator方法
const obj = {
a: 1,
b: 2,
c: 3
}
Object.prototype[Symbol.iterator] = function (){
const allVal = Object.values(this)
let index = 0
return {
next(){
if(index < allVal.length){
return {value:allVal[index++],done:false}
}else{
return {value:undefined,done:true}
}
}
}
}
for(const item of obj) {
console.log(item)
}
// 打印结果为：
// 1
// 2
// 3
或者用es6的Generator 函数
Generator返回的就是遍历器对象
const obj = {
a:1,
b:2,
c:3
}
obj[Symbol.iterator] = function* (){
yield this.a
yield this.b
yield this.c
}
for(const item of obj) {
console.log(item)
}
// 打印结果为：
// 1
// 2
// 3
以上为内容为个人理解，如有哪里不对还请大神指出，谢谢
