2020-12-27

Iterator 接口

文档关于 Iterator 接口的介绍：遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。。。。 文章很官方

其实总结来说：

1. Iterator接口 提供一个统一的接口
2. Iterator迭代器是一个函数
3. 返回一个next方法，调用next之后会返回一个包含两个属性的对象 {value:’’,done:true}
4. Iterator 专门供 for-of 消费的， 凡是部署了[Symbol.iterator] 属性的 数据结构，都可以使用 for-of进行遍历

Iterator接口的执行原理

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

对于数组array， set, map, string， nodelist 等 原生具备 Iterator 接口； 但是对于我们的自定义对象 却不能使用，需要自行部署 [Symbol.iterator] 属性，改属性是一个方法

自定义对象

我们通常声明的对象就是自定义对象 , 通常情况我们使用for-in 遍历对象

let obj = {
	name:'张三',
	age:18,
	say:'hello world'
}

   
   

• for-in 遍历对象

for(let key in obj){
	console.log(key) // 对象的属性
	console.log(obj[key]) // 对象的属性值
}

   
   

• 如果直接使用for-of 遍历对象， 则会报错

//  报错： obj is not iterable   (obj 不可迭代的)
   for(let key of obj){
       console.log(key);
   }

   
   

为自定义对象部署 [Symbol.iterator] 属性

        let obj = {
            name:'张三',
            age:18,
            say:'hello world'
            [Symbol.iterator]: function(){
                let index = 0;  // 模拟指针移动
                let key = null;  // 存储对象中的键（属性名）  
                let self = this;  // 存储this（存执指向）
                return {
                    next: function(){
                        if(key == null){
                            //  key 是存储所有的键名  是一个数组
                            key = Object.keys(self)
                        }
                        return {
                            value:self[key[index]],
                            done:++index > key.length
                        }
                    }
                }
            }
        }

   
   

• 部署完成后， 再次使用 for-of 遍历对象，可以实现正常的遍历
• 执行过程 分解如下: 指针对象的next方法，用来移动指针

		let iterator = obj[Symbol.iterator]();
        let res1 = iterator.next();
        let res2 = iterator.next();
        let res3 = iterator.next();
        let res4 = iterator.next();
        console.log(res1); // {value:'张三‘, done:false}
        console.log(res2);   // {value: 18, done: false}
        console.log(res3);  // {value: 'hello world', done: false}
        console.log(res4);  // {value: undefined, done: true}