JavaScript 进阶必学：Iterable Object 让你成为数据遍历大师！

一、什么是可迭代对象？

可迭代对象（Iterable Object）是JavaScript中一种特殊的对象，它实现了迭代协议（Iteration Protocol），允许通过for...of循环、扩展运算符（...）或Array.from()等方法按顺序访问其元素。

核心特征：

1. 必须实现Symbol.iterator方法：该方法返回一个迭代器对象（Iterator），用于定义如何遍历数据。
2. 迭代器对象需包含next()方法：每次调用next()返回一个包含value（当前值）和done（是否结束）的对象。

常见内置可迭代对象：
• 数组（Array）、字符串（String）、Map、Set等。

二、可迭代对象的核心原理

1. 迭代器协议的工作流程

const arr = [1, 2, 3];  
const iterator = arr[Symbol.iterator]();  
console.log(iterator.next()); // { value: 1, done: false }  
console.log(iterator.next()); // { value: 2, done: false }  
console.log(iterator.next()); // { value: 3, done: true }  

• 迭代器通过next()逐步生成值，直到done为true。

2. 可迭代对象的本质

可迭代性是一种协议而非具体类型。即使是非集合对象（如自定义的Range），只要实现Symbol.iterator方法，即可被遍历。

示例：自定义可迭代对象

class Range {  
  constructor(from, to) {  
    this.from = from;  
    this.to = to;  
  }  
  [Symbol.iterator]() {  
    let current = this.from;  
    return {  
      next: () => ({  
        done: current > this.to ,
        value: current <= this.to ? current++ : undefined,  
      })  
    };  
  }  
}  
const range = new Range(1, 3);  
for (const num of range) console.log(num); // 1, 2, 3 
// 使用扩展操作符
const arr =  [...range] 
console.log(arr); // [1,2,3]

代码解释：

1. Symbol.iterator 方法： 这是关键！它返回一个迭代器对象。

2. 迭代器对象： 迭代器对象必须有一个 next() 方法。

3. next() 方法： 每次调用 next() 方法，它应该返回一个包含 value 和 done 属性的对象。

   • value：当前迭代的值。
   • done：一个布尔值，表示迭代是否完成。true 表示迭代完成，false 表示还有更多值。

3.更简洁的自定义 Iterable Object (使用 Generator 函数)

使用 Generator 函数可以更简洁地实现 Symbol.iterator 方法：

class Range {
  constructor(from, to) {
    this.from = from;
    this.to = to;
  }
  *[Symbol.iterator]() {
   let current = this.from;
    while (current <= this.to) {
      yield current++;
    }s
  }
}
const range = new Range(1, 3);
let iter = range[Symbol.iterator]();

代码解释：

1. * 符号： *[Symbol.iterator]() 表示这是一个 Generator 函数。
2. yield 关键字： yield value 暂停函数的执行，并返回 current。下次调用 next() 方法时，函数会从暂停的地方继续执行。