JavaScript 可迭代对象 (Iterable Object)

可迭代对象是实现了 迭代协议 的 JavaScript 对象，允许它们被 for...of 循环遍历或使用展开运算符 (...) 展开。

迭代协议

JavaScript 中的迭代协议包含两部分：

1. 可迭代协议：对象必须实现 @@iterator 方法（通过 Symbol.iterator 访问）
2. 迭代器协议：@@iterator 方法返回的对象必须实现 next() 方法

创建可迭代对象

const myIterable = {
  [Symbol.iterator]: function() {
    let step = 0;
    return {
      next: function() {
        step++;
        if (step === 1) {
          return { value: 'Hello', done: false };
        } else if (step === 2) {
          return { value: 'World', done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

// 使用 for...of 遍历
for (const item of myIterable) {
  console.log(item);
}
// 输出:
// Hello
// World

内置可迭代对象

JavaScript 中许多内置对象是可迭代的：

• Array
• String
• Map
• Set
• TypedArray
• arguments 对象
• DOM NodeList

// 数组是可迭代的
for (const item of [1, 2, 3]) {
  console.log(item);
}

// 字符串也是可迭代的
for (const char of "hello") {
  console.log(char);
}

自定义类的可迭代实现

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  
  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    
    return {
      next() {
        if (current <= end) {
          return { value: current++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

const range = new Range(1, 5);
for (const num of range) {
  console.log(num); // 1, 2, 3, 4, 5
}

使用可迭代对象的场景

1. for...of 循环
2. 展开运算符 ...
3. 解构赋值
4. Array.from()
5. new Map(), new Set()
6. Promise.all(), Promise.race()
7. yield*

// 展开运算符
const numbers = [...new Range(1, 3)]; // [1, 2, 3]

// 解构赋值
const [first, second] = new Range(5, 10);
console.log(first, second); // 5, 6

可迭代对象是 JavaScript 中处理集合数据的强大工具，使得自定义数据结构能够与语言内置特性无缝集成。