Javascript迭代器

Array
Arguments
Map
Set
String
TypedArray
NodeList

迭代器的工作原理

1. 创建一个指针，指向当前数据结构的起始位置
2. 第一次调用对象next方法，指针自动指向数据结构的第一个成员
3. 接下来不断调用next，指针一直往后移动，直到指向最后一个成员
4. 每调用一次next方法返回一个包含value和done属性的对象

为什么Object不可以被迭代

let arr = [1, 2, 3]
let obj = {
    a: 1,
    b: 2,
    c: 3
}
for(let val of arr) {
    console.log(val)
}
for(let val of obj) {
    console.log(val)
}

接着运行上面的代码，会出现以下报错信息：

let obj = {
    a: 1,
    b: 2,
    c: 3,
    [Symbol.iterator]: function () {
        let values = Object.values(obj)
        let index = 0
        /* 必须得return 一个对象出去 */
        return {
            /* 这是固定写法 */
            next() {
                if (index >= values.length) {
                    return {
                        done: true // 此时迭代结束，就不需要再return value出去
                    }
                } else {
                    return {
                        value: values[index++],
                        done: false
                    }
                }
            }
        }
    }
}
for (let item of obj) {
    console.log(item)
}

迭代器利用for of 自定义遍历数据

let obj = {
    a: 1,
    b: 2,
    c: [
        '小韩',
        '小徐',
        '小悦'
    ],
    [Symbol.iterator]: function () {
        let idx = 0;
        const _c = this.c
        return {
            next() {
                return idx < _c.length ? { value: _c[idx++], done: false } : { value: undefined, done: true }
            }
        }
    }
}
let values = obj[Symbol.iterator]()
console.log(values) // 得到迭代器对象，里面含有next方法
console.log(values.next()) // done:false(表示可以继续迭代)，并且value为 小韩
console.log(values.next()) // done:false(表示可以继续迭代)，并且value为 小徐
console.log(values.next()) // done:false(表示可以继续迭代)，并且value为 小悦
console.log(values.next()) // done:true(表示迭代结束)

总结