当前位置:主页 > 网页前端 > JavaScript代码 >

详解如何优雅迭代JavaScript字面对象

时间:2022-10-16 11:23:34 | 栏目:JavaScript代码 | 点击:

为什么要实现自定义迭代器

因为在JavaScript中字面量对象是不支持迭代的

如何实现JavaScript字面量对象迭代

实现方法

第一种使用比较简单的遍历来实现

let obj = {uname: "zhangsan"};
obj[Symbol.iterator] = function () {
  const keys = Object.keys(this);
  let index = 0;
  return {
    next() {
      return {
        value: obj[keys[index++]],
        done: index > keys.length
      }
    }
  };
};

let iterator = obj[Symbol.iterator]();

console.log(iterator.next());
//{value: 'zhangsan', done: false}

obj.uname='sudongyu'

iterator = obj[Symbol.iterator]();

console.log(iterator.next());
//{value: 'sudongyu', done: false}

第二种使用生成器函数来实现

/**
 * 将{}对象转换为可迭代对象
 */
function object2iterator(obj){
    obj[Symbol.iterator]=function* () {
        let properties = Object.keys(this);
        for (let i of properties) {
            yield [i, this[i]];
        }
    }
    return obj
}

生成器详细API 请参考 mdn

解析为什么生成器函数要这样设计

以下纯个人理解,如果有歧义就当我放屁~ 哈哈哈

注意??:我还想表达以下几个观点:

总结

您可能感兴趣的文章:

相关文章