JavaScript可迭代协议详解及对象实现方法

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript可迭代协议是什么？如何让对象可迭代？》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

JavaScript的可迭代协议是对象需拥有[Symbol.iterator]方法并返回符合迭代器协议的对象；该方法必须为普通函数，返回含next()且返回{value,done}的对象。

JavaScript 的可迭代协议到底是什么？

可迭代协议不是语法糖，也不是新特性，而是 JavaScript 引擎识别“能被 for...of、Array.from()、展开运算符 [...obj] 等消费”的一套约定：对象必须有名为 [Symbol.iterator] 的方法，且该方法返回一个符合迭代器协议的对象（即有 next() 方法，返回 { value, done } 形状的对象）。

让普通对象支持 for...of 的最简写法

直接在对象上定义 [Symbol.iterator] 方法即可。注意：不能用箭头函数（会丢失 this 绑定），且返回值必须是迭代器对象。

const obj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]() {
    const keys = Object.keys(this);
    let index = 0;
    return {
      next() {
        if (index 

• [Symbol.iterator] 是固定键名，必须用方括号计算属性写法
• 迭代器内部的 next() 必须返回 { value, done }，done: true 后不可再返回有效值
• 如果想遍历键名而非值，把 this[key] 换成 key 即可

用生成器函数 function* 简化实现

手写 next() 容易出错，生成器函数自动满足迭代器协议，是最推荐的方式。

const obj = {
  x: 10,
  y: 20,
  z: 30,
  *[Symbol.iterator]() {
    for (const key of Object.keys(this)) {
      yield this[key];
    }
  }
};

console.log([...obj]); // [10, 20, 30]
console.log(Array.from(obj)); // [10, 20, 30]

• 生成器函数前必须加 *，且内部用 yield 返回每个值
• 生成器函数体内的 this 指向调用对象，无需手动 bind
• 不支持 IE，但现代环境（Chrome/Firefox/Safari/Edge）全部支持

常见踩坑点：为什么 for...of 还是报错？

即使加了 [Symbol.iterator]，仍可能失败，原因很具体：

• [Symbol.iterator] 方法抛出异常（比如访问了 undefined 的属性）→ 直接 TypeError: obj is not iterable
• 返回的不是对象，或对象没有 next 方法 → 同样报 is not iterable
• 在类实例中定义时，写成了实例属性（如 this[Symbol.iterator] = function(){...}），但没在构造函数里执行，导致原型链上无该方法
• 使用 Object.assign({}, obj) 后，[Symbol.iterator] 不会被复制（Symbol 属性默认不可枚举，Object.assign 只拷贝可枚举自有属性）

调试时可直接检查：typeof obj[Symbol.iterator] 是否为 "function"，再手动调用 obj[Symbol.iterator]().next() 看返回结构是否合规。

终于介绍完啦！小伙伴们，这篇关于《JavaScript可迭代协议详解及对象实现方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！