Javascript迭代器

韩小韩
2021-07-17 / 0 评论 / 73 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年07月17日,已超过189天没有更新,若内容或图片失效,请留言反馈。

我们都知道可以用 for...of... 来循环可迭代对象,例如循环

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)
}

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

Javascript迭代器

Javascript迭代器

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)
}

运行上方的代码,此时obj已经可以使用 for...of... 进行循环,并且此时的obj已经是一个可迭代对象

迭代器利用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(表示迭代结束)

Javascript迭代器

总结

迭代协议:规定迭代与实现的逻辑(也就是上面迭代器里的逻辑)
迭代器:具体的迭代实现逻辑(也就是上面的迭代器函数)
迭代对象:可被迭代的对象,已经实现[Symbol.iterator]方法的对象(就是上面加了迭代器后的obj)

3

评论 (0)

取消