js 迭代器next和生成器yield的区别

迭代器（Iterator）和生成器（Generator）是 JavaScript 中用于处理遍历和惰性求值的两个重要概念。它们密切相关，但有明显的区别。以下是它们的核心区别和联系：

---

1. 迭代器（Iterator）

• 定义：迭代器是一个对象，它实现了迭代器协议，即具有 next() 方法。
• next() 方法：每次调用 next() 方法，返回一个包含 value 和 done 属性的对象。
  • value：当前迭代的值。
  • done：布尔值，表示迭代是否完成。
• 手动实现：需要显式定义 next() 方法。
• 用途：用于遍历数据集合。

示例：自定义迭代器

const myIterator = {
  data: [1, 2, 3],
  index: 0,
  next() {
    if (this.index < this.data.length) {
      return { value: this.data[this.index++], done: false };
    } else {
      return { value: undefined, done: true };
    }
  },
};

console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { value: undefined, done: true }

---

2. 生成器（Generator）

• 定义：生成器是一种特殊的函数，使用 function* 定义，通过 yield 关键字暂停和恢复执行。
• 返回值：生成器函数调用后返回一个生成器对象，该对象实现了迭代器协议（即具有 next() 方法）。
• 自动实现：生成器函数自动生成迭代器，无需手动实现 next() 方法。
• 用途：用于简化迭代器的创建，支持惰性求值。

示例：生成器函数

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = myGenerator();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

---

3. 核心区别

特性	迭代器（Iterator）	生成器（Generator）
定义方式	手动实现 next() 方法的对象。	使用 function* 定义的函数。
实现复杂度	需要手动管理状态（如索引）。	自动管理状态，通过 yield 暂停和恢复执行。
返回值	直接是迭代器对象。	返回生成器对象，生成器对象是迭代器。
适用场景	需要完全控制迭代逻辑时使用。	简化迭代器创建，支持惰性求值。
语法支持	无特殊语法，需手动实现。	使用 function* 和 yield 语法。

---

4. 联系

• 生成器是迭代器的语法糖：生成器函数返回的生成器对象实现了迭代器协议，因此生成器是一种特殊的迭代器。
• 生成器简化了迭代器的创建：通过生成器，开发者无需手动实现 next() 方法，只需使用 yield 关键字即可。

---

5. 示例对比

使用迭代器遍历数组

const myIterator = {
  data: [1, 2, 3],
  index: 0,
  next() {
    if (this.index < this.data.length) {
      return { value: this.data[this.index++], done: false };
    } else {
      return { value: undefined, done: true };
    }
  },
};

let result = myIterator.next();
while (!result.done) {
  console.log(result.value); // 1, 2, 3
  result = myIterator.next();
}

使用生成器遍历数组

function* myGenerator() {
  const data = [1, 2, 3];
  for (const item of data) {
    yield item;
  }
}

const iterator = myGenerator();
let result = iterator.next();
while (!result.done) {
  console.log(result.value); // 1, 2, 3
  result = iterator.next();
}

---

6. 总结

• 迭代器：是一个实现了 next() 方法的对象，用于手动控制遍历逻辑。
• 生成器：是一种特殊的函数，通过 function* 和 yield 自动生成迭代器，简化了遍历逻辑。
• 生成器是迭代器的语法糖：生成器返回的对象实现了迭代器协议。
• 选择使用：
  • 如果需要完全控制遍历逻辑，使用迭代器。
  • 如果需要简化代码并支持惰性求值，使用生成器。

理解迭代器和生成器的区别与联系，可以帮助你更好地处理遍历和惰性求值的场景。