如何用ES6将不可迭代对象变为可迭代？

作者：Smoothzjc
博客主页：https://blog.csdn.net/weixin_53893220?spm=1001.2101.3001.5343

众所周知，在js中的某些类型是内置好的可迭代对象，比如：字符串、数组、类型数组、Map对象等。而Object类型不可迭代。这些内置可迭代对象可以进行迭代的原因是内部实现了@@iterator 方法，即在该对象或该对象的原型链上有Symbol.iterator属性实现了@@iterator 方法。

而在实际开发获取数据中，为了数据的方便读取保存，需要让拥有某个数据结构的对象可迭代，因此本文将讲述如何自定义Symbol.iterator属性实现对象的可迭代化

两种方式：
1.通过可迭代协议，用yield来控制返回值
2.通过迭代器协议，用返回值中的done判断该对象是否迭代完毕，用value来返回所需值

本篇文章用作例子的对象数据结构如下：

let authors = {
    allAuthors: {
        fiction: ['Agla', 'Skks', 'LP'],
        scienceFiction: ['Neal', 'Arthru', 'Ribert'],
        fantasy: ['J.R.Tole', 'J.M.R', 'Terry P.K']
    },
    Addres: []
}

1.可迭代协议实现

authors[Symbol.iterator] = function*() {
    let allAuthors = this.allAuthors;
    let keys = Reflect.ownKeys(allAuthors);
    let value = [];

    while (1) {
        if (!value.length) {
            if (keys.length) {
                value = allAuthors[keys[0]]
                keys.shift()
                yield value.shift()
            } else {
                return false
            }
        } else {
            yield value.shift()
        }
    }

}

let one = []
for (let key of authors) {
    // console.log(key)
    one.push(key)
}
console.log(one)

2.迭代器实现

authors[Symbol.iterator] = function() {
    let allAuthors = this.allAuthors;
    let keys = Reflect.ownKeys(allAuthors);
    let value = [];

    return {
        next() {
            if (!value.length) {
                if (keys.length) {
                    value = allAuthors[keys[0]];
                    keys.shift();
                }
            }

            return {
                done: !value.length,
                value: value.shift()
            }
        }
    }
}

let one = []
for (let key of authors) {
    // console.log(key)
    one.push(key)
}
console.log(one)

觉得该篇文章有用的请不要忘记忘记点击右下角的大拇指~

欢迎大家关注我的公众号：Smooth前端成长记录
公众号同步更新CSDN博客内容，想方便阅读博客的C友可以来关注我的公众号以便获得更优良的阅读体验~