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

为什么要实现自定义迭代器
如何实现JavaScript字面量对象迭代
实现方法
解析为什么生成器函数要这样设计

为什么要实现自定义迭代器因为在JavaScript中字面量对象是不支持迭代的

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

只要正确实现字面对象的Symbol.iterator这个属性所对应的迭代器函数即可
注意??该迭代器函数只是一个函数，而不是真正的迭代器
迭代器是一个对象，需要提供next函数来提供给类似for of forEach这种迭代函数使用

实现方法

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

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

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

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

迭代器函数是一个函数，这样每次调用都会为将要return的迭代器中的next函数创建一个全新的词法作用域
这样每次在创建新的迭代器时，执行iterator.next()的时候就可以利用闭包访问到属于自己的外层词法环境中的变量，在方法一中也就是能够从index为0开始迭代
这样每个独立的迭代器对象就能相互隔离～

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