什么是Iterator和Iterable？请举例说明。

在JavaScript（包括ES6及以后版本）中，Iterator 和 Iterable 是两个重要的概念，它们与集合类型（如数组、Map、Set等）以及高级循环和迭代操作紧密相关。

文末有我帮助400多位同学成功领取到前端offer的场景题哦

Iterable

一个对象如果实现了@@iterator方法（即在其对象定义中有一个返回迭代器对象的[Symbol.iterator]()方法），那么它就是可迭代的（Iterable）。这个方法使得对象可以与for...of循环或其他期望迭代器的结构（如展开运算符...）一起使用。

例如，数组就是内建的Iterable：

const array = [1, 2, 3];

// 数组有一个默认的迭代器
const iterator = array[Symbol.iterator]();

// 使用for...of循环遍历数组（因为数组是可迭代的）
for (const value of array) {
  console.log(value); // 输出：1, 2, 3
}

Iterator

迭代器（Iterator）是一个具有next()方法的对象，该方法返回一个对象，该对象具有两个属性：value（表示下一个迭代的值）和done（一个布尔值，表示迭代是否完成）。

在上面的例子中，array[Symbol.iterator]()返回的就是一个迭代器对象。我们可以手动使用这个迭代器：

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

console.log(iterator.next().value); // 输出：1
console.log(iterator.next().value); // 输出：2
console.log(iterator.next().value); // 输出：3
console.log(iterator.next().done);  // 输出：true

当你尝试再次从已经完成的迭代器中取值时，value会是undefined，而done会是true。

自定义Iterable和Iterator

你也可以创建自己的Iterable和Iterator。例如，以下是一个简单的自定义Iterable对象：

class MyIterable {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
}

const myIterable = new MyIterable();

for (const value of myIterable) {
  console.log(value); // 输出：1, 2, 3
}

在这个例子中，MyIterable类定义了一个生成器函数作为[Symbol.iterator]()方法，这使得MyIterable的实例是可迭代的。生成器函数内部使用了yield关键字来逐个产生值，这些值可以在for...of循环中被迭代。

• 堪称2024最强的前端面试场景题，让421人成功拿到offer