评论

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

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

CSDN博客主页: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)

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

最后一次编辑于  2021-11-15  
点赞 1
收藏
评论

1 个评论

  • 谋谋谋
    谋谋谋
    2021-11-15

    好像大拇指在左边吧

    2021-11-15
    赞同 1
    回复 1
    • Smooth
      Smooth
      2021-11-15
      啊这
      2021-11-15
      1
      回复
登录 后发表内容