js中Iterator

记录ES6中的Iterator的学习

---

前言

处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法，从简单的for循环到map()和filter()。迭代器和生成器将迭代的概念直接带入核心语言，并提供了一种机制来自定义for…of循环的行为。

---

提示：以下是本篇文章正文内容，下面案例仅供参考

一、手动实现一个类似于Generator的next()迭代一个数组

function makeIterator(arr) {
    let nextIndex = 0
    return {
        next() {
            return nextIndex < arr.length ? {
                value: arr[nextIndex++],
                done: false
            } : {
                valude: 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())

二、Iterator

1.常用的数据结构可迭代的有

我们常用的数据中一下是可迭代的

• Array
• Map
• Set
• String
• TypedArray
• arguments对象
• NodeList对象

代码示例:

let map = new Map()
map.set('name', '张三')
map.set('age', 19)
map.set('school', 'imooc')
for (const iterator of map) {
    console.log(iterator)
}

for (let value of map) {
    console.log(value)
}

let it = map[Symbol.iterator]()
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())

2.通过Iterator实现不可迭代数据的“可遍历”

• 可迭代协议：存在属性Symbol.iterator
• 如果让一个对象是可遍历的，就要遵守可迭代协议，该协议要求对象要部署一个以 Symbol.iterator 为 key 的键值对，而 value 就是一个无参函数，这个函数返回的对象要遵守迭代器协议
• 迭代器协议：return { next(){ return{value , done } } }
• 首先，它是一个对象
• 其次，这个对象包含一个无参函数 next
• 最后，next 返回一个对象，对象包含 done 和 value 属性。其中 done 表示遍历是否结束，value 返回当前遍历的值。

代码如下（示例）：

let obj= {
    allActions: {
        act1: [
            'swmming',
            'go hiking',
            'riding'
        ],
        act2: [
            'play basketball',
            'play pingpong',
            'play badminton',
        ],
        act3: [
            'watch movie',
            'shopping',
            'dancing'
        ]
    }
}

obj[Symbol.iterator] = function() {
    let allActions = this.allActions 
    let keys = Reflect.ownKeys(allActions)
    let values = []
    return {
        next() {
            if (!values.length) {
                if (keys.length) {
                    values = allActions[keys[0]]
                    keys.shift()
                }
            }
            return {
                done: !values.length,
                value: values.shift()
            }
        }
    }
}

for (let value of obj) {
    console.log(value)
}

let it = obj[Symbol.iterator]()
console.log(it.next())
console.log(it.next())
console.log(it.next())

2.通过Generator实现

obj[Symbol.iterator] = function*() {
    let allActions = this.allActions 
    let keys = Reflect.ownKeys(allActions)
    let values = []
    while (1) {
        if (!values.length) {
            if (keys.length) {
                values = allActions[keys[0]]
                keys.shift()
                yield values.shift()
            } else {
                return false
            }
        } else {
            yield values.shift()
        }
    }
}