迭代器是 ES6 中新增的一个特性，可以通过该特性帮助我们遍历数据结构中的元素，例如数组或者对象。它的主要用途是提供一种统一的遍历数据结构的方式，可以使代码更加简洁、清晰。
迭代器的定义
迭代器是一个包含 next() 方法的对象，这个方法会返回一个由 value 和 done 两个属性组成的对象。其中，value 表示当前迭代位置的值，done 表示迭代器是否已经完成。
创建迭代器
要创建一个迭代器，我们需要在对象上实现一个迭代器方法 Symbol.iterator，该方法返回迭代器对象。下面是一个创建迭代器的示例代码：
const arr = [1, 2, 3]; const it = arr[Symbol.iterator]();
在这个例子中，我们使用了数组对象的 Symbol.iterator 方法创建了一个迭代器对象 it。
使用迭代器
使用迭代器的最基本方法是不断地调用 next() 方法，直到 done 属性返回 true。下面是一个遍历数组的示例代码：
const arr = [1, 2, 3]; const it = arr[Symbol.iterator](); let result = it.next(); while (!result.done) { console.log(result.value); result = it.next(); }
在这个例子中，我们先定义了一个迭代器对象 it，然后不断调用 next() 方法，打印出数组元素的值。
for...of 循环
使用迭代器的常见方式是使用 for...of 循环。for...of 循环会自动调用迭代器的 next() 方法，遍历整个数据结构。下面是一个使用 for...of 循环遍历数组的示例代码：
const arr = [1, 2, 3]; for (let item of arr) { console.log(item); }
迭代器的应用
迭代器可以用来遍历各种数据结构，例如数组、对象、字符串等。此外，它还可以用来实现一些高级功能，例如生成器和可消费迭代器。
生成器
生成器是 JavaScript 中的一个强大特性，可以帮助我们实现协程和异步编程的功能。生成器函数使用 function* 关键字定义，可以通过 yield 关键字暂停函数执行，并返回一个值给调用者。下面是一个简单的生成器函数示例：
-- -------------------- ---- ------- --------- ---------------- - ----- -- ----- -- ----- -- - ----- -- - ----------------- ----------------------- -- ------- -- ----- ------ ----------------------- -- ------- -- ----- ------ ----------------------- -- ------- -- ----- ------ ----------------------- -- ------- ---------- ----- -----展开代码
在这个例子中，我们通过 createIterator() 函数创建了一个生成器对象 it，然后不断调用 next() 方法来获取每一个值。
可消费迭代器
可消费迭代器是一种可以被多次消费的迭代器，每次消费一个元素，直到结束。下面是一个简单的可消费迭代器示例：
-- -------------------- ---- ------- ----- ------------------ - ----------------- - --------- - ----- ---------- - -- - ------------------- - ------ ----- - ------ - -- ----------- - ----------------- - ------ - ------ ------------------------ ----- ----- -- - ---- - ------ - ----- ---- -- - - - ----- -- - --- ---------------------- -- ---- --- ---- ---- -- --- - ------------------ - --- ---- ---- -- --- - ------------------ -展开代码
在这个例子中，我们定义了一个 ConsumableIterator 类来实现可消费迭代器的功能。注意，在每次调用迭代器的 next() 方法时，我们都要返回一个新的对象来表明是否已经完成迭代。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c01a57314edc2684634ec6
