可迭代接口,使用迭代器模式实现对象for...of遍历

实现iterator接口就是for...of前提
Array,Set,Map都可以用for...of来遍历。
通过打印他们的原型对象,都可以看到他们的原型方法中都有iterator方法
可迭代接口,使用迭代器模式实现对象for...of遍历_第1张图片

通过调用其中的iterator方法,
可迭代接口,使用迭代器模式实现对象for...of遍历_第2张图片
可以猜测他的实现内部维护了一个数据指针,每次调用next()方法,指针会后移一位,而done属性用来判断数据是否被全部遍历完。
所有可以用for...of遍历的数据类型内部都要实现iterator的接口。这个方法要返回一个next()方法的对象,调用next()方法就可以实现对数据的遍历。
使用迭代器模式实现对象的for...of方法

const obj = {
    store: [1, 2, 3, 4],
    [Symbol.iterator]: function () {
        const self = this;
        let index = 0;
        return {
            next: function () {
                const result = {
                    value: self.store[index],
                    done: index >= self.store.length
                }
                index++;
                return result;
            }
        }
    }
}

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

可迭代接口,使用迭代器模式实现对象for...of遍历_第3张图片

你可能感兴趣的:(javascriptes6前端)