【ES6】Iterator迭代器

---

一、Iterator

遍历器（Iterator）是一种接口机制，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。 Iterator 的作用有三个：

• 为各种不同的数据结构提供一个统一的、简便的访问接口；
• 使得数据结构的成员能够按某种次序排列，使不支持遍历的数据结构“可遍历”；
• ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费。

Iterator 的遍历过程是这样的：

1. 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
2. 第一次调用指针对象的 next 方法，可以将指针指向数据结构的第一个成员。
3. 第二次调用指针对象的 next 方法，指针就指向数据结构的第二个成员。
4. 不断调用指针对象的 next 方法，直到它指向数据结构的结束位置。

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

二、用法详解

1. 基本用法

function makeIterator(arr) {
    let nextIndex = 0
    return {
        next() {
        // 三目运算符
            return nextIndex < arr.length ? {
                value: arr[nextIndex++],
                done: false
            } : {
                value: undefined,
                done: true
            }
        }
    }
}
let it = makeIterator(['a', 'b', 'c'])
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())

2. 遍历不可迭代对象

2.1 原生具备Iterator接口的数据结构：

对于数组这样的可迭代结构，它里面自带了Symbol.iterator

let arr = ['a', 'b', 'c'] // 对于数组这样的可迭代结构，它里面自带了Symbol.iterator
console.log(arr) // ["a", "b", "c"]
let it = arr[Symbol.iterator]()
console.log(it.next()) // {value: "a", done: false}
console.log(it.next())
console.log(it.next())
console.log(it.next())// {value: undefined, done: true} ,迭代结束

let map = new Map()
map.set('name', 'es')
map.set('age', 5)
map.set('school', 'KD')
// console.log(map) //输出整个map，Map数据结构也是自带Symbol.iterator的
let it = map[Symbol.iterator]()
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())

2.2 遍历不可迭代的对象：

可迭代协议：当前对象是否有Symbol.iterator属性，有->可迭代，无->不可迭代

迭代器协议：要符合这样的条件

 return { 
 	next(){
  		return{ value, done} 
  		}
  }

将不可迭代对象改造成符合上述两种协议的结构，便能够实现遍历：

// 定义一个不可遍历的对象
let courses = {
    allCourse: {
        frontend: ['ES', '小程序', 'Vue', 'React'],
        backend: ['Java', 'Python', 'SpringBoot'],
        webapp: ['Android', 'IOS']
    }
}
for(let c of courses){
    console.log(c) // 报错，不可迭代
}
// 解决
courses[Symbol.iterator] = function () {
    let allCourse = this.allCourse
    let keys = Reflect.ownKeys(allCourse) // 遍历allCourse对象，取到每一个key
    let values = [] // 用于存放每个key对应的值
    return {
        next() {
            if (!values.length) {
                if (keys.length) {
                    values = allCourse[keys[0]] // 第一轮取到key为frontend对应的value，存放在values内
                    keys.shift() // 弹出数组的第一个元素，第一轮弹出frontend，backend就变成了第一个
                }
            }
            return {
            // 先取长度，再删掉值，直到删完
                done: !values.length,
                value: values.shift()
            }
        }
    }
}

for (let c of courses) {
    console.log(c) // 成功输出每一门课程
}

2.3 Generator 遍历不可迭代对象

Generator 内部自带next方法，所以它也能够帮助遍历不可迭代对象

courses[Symbol.iterator] = function* () {
    let allCourse = this.allCourse
    let keys = Reflect.ownKeys(allCourse)
    let values = []
    while (1) {
        if (!values.length) {
            if (keys.length) {
                values = allCourse[keys[0]]
                keys.shift()
                // 使用yield来暂停并返回当前的值
                yield values.shift()
            } else {
                return false
            }
        }else{
            yield values.shift()
        }
    }
}
for (let c of courses) {
    console.log(c)
}

总结

Iterator使不支持遍历的数据结构变得“可遍历”。