ES2015 迭代器模式 Iterator

设计模式：迭代器模式

实现迭代器的目的是干什么呢？

// 迭代器设计模式

// 场景：你和我协同开发一个任务清单应用

// 我的代码   =========

const todoList = {
    life:['吃饭','睡觉','撸猫'],
    study:['语文','数学','英语']
}

// 你的代码   =========

for (const item of todoList.life) {
	console.log(item);
}
for (const item of todoList.study) {
	console.log(item);
}

如果我需要在我的todoList 数据列表里添加数据时，你的代码就需要作出相应的更改，对于调用来说，代码耦合度太高

如下：

// 迭代器设计模式

// 场景：你和我协同开发一个任务清单应用

// 我的代码   =========

const todoList = {
    life:['吃饭','睡觉','撸猫'],
    study:['语文','数学','英语'],
    game:['王者荣耀']
}

// 你的代码   =========

for (const item of todoList.life) {
	console.log(item);
}
for (const item of todoList.study) {
	console.log(item);
}
for (const item of todoList.game) {
	console.log(item);
}

如何解决：

如果我的代码能够对外统一提供一个遍历的接口

对于调用者而已，就不用去关心它内部的数据结构，也不用担心结构的改变

我们可以自己写一个方法来实现：

// 迭代器设计模式

// 场景：你和我协同开发一个任务清单应用

// 我的代码   =========

const todoList = {
    life:['吃饭','睡觉','撸猫'],
    study:['语文','数学','英语'],
    game:['王者荣耀'],
    each:function(callback){
        const all = [].concat(this.life,this.study,this.game)
        for(const item of all){
            callback(item)
        }
    }
}

// 你的代码   =========

//  不需要关注数据，只管调用
todoList.each(function(item)){
    console.log(item)
}

其实实现可迭代接口也是相同的道理

用迭代器的方法实现：

// 迭代器设计模式

// 场景：你和我协同开发一个任务清单应用

// 我的代码   =========

const todoList = {
    life:['吃饭','睡觉','撸猫'],
    study:['语文','数学','英语'],
    game:['王者荣耀'],

    [Symbol.iterator]:function () {
        const all = [].concat(this.life,this.study,this.game)
        let index = 0;
        return {
            next:function () {
                return {
                    value :all[index],
                    done:index++ > all.length
                }
            }
        }
    }
    
}

迭代器的核心 就是对外提供统一遍历接口，让外部不用去担心内部的数据结构是怎么样的

这里展示的each方法只适用于这里展示的数组结构

而ES2015种的迭代器 是从语言层面去实现的迭代器模式，所以说它适用于任何数据结构，只要实现了iterable 接口，那我们就可以实现使用for…of 遍历对象