什么是Iterator？
Iterator本质上是一个遍历器，它是ES6中新增的一种数据访问方式，它使得数据的遍历更加方便和灵活。
在ES6以前，我们通常使用for循环、while循环等方式对数据进行遍历，但很多复杂的数据结构是无法采用这种方式进行遍历的。而在ES6中，通过Iterator，我们可以对任意的数据结构进行遍历操作。
一个对象要成为可遍历的数据结构，必须实现Iterator接口。该接口定义了对象遍历时next方法返回值的格式：
interface IteratorResult { done: boolean; value: any; }
Iterator接口的实现
在ES6中，有一些数据结构内部已经实现了Iterator接口，比如数组、Set、Map等。而对于自定义的数据结构，我们需要手动实现Iterator接口。下面是一个实现具有Iterator接口的自定义集合的示例代码：
-- -------------------- ---- ------- ----- --------- - ------------- - --------- - --- - --------- - -- ----------------- - --------------------- - ------ ----- - ------------ - ----- ----- - ------------------------ -- ------ - --- - ----------------------- --- ------ ----- - ------ ------ - --------- - ------ ----------------------- --- --- - ------ - ------ ----------------- - ------------------- - --- ----- - -- ----- ---- - ---------- ------ - ------ - -- ------ - ------------ - ------ - ------ -------------- ----- ----- -- - ---- - ------ - ----- ---- -- - - -- - -展开代码
在上面的代码中，我们通过在CustomSet对象上添加Symbol.iterator方法，该方法返回一个遍历器对象，该遍历器对象包含next方法，每次调用next方法就可以得到代表一个成员的对象。
for...of循环
for...of 循环可以使用于任何具有 Iterator 接口的数据结构，它内部使用了 Iterator 接口来实现遍历操作。下面展示了一个基本的 for...of 循环的使用方法，用来遍历一个数组：
const arr = [10, 20, 30]; for (const item of arr) { console.log(item); } // Output: 10 20 30
对于一个自定义的数据结构，只要它实现了 Iterator 接口，就可以使用 for...of 循环进行遍历。下面展示了一个使用我们上面自定义集合的 for...of 循环的示例代码：
const customSet = new CustomSet(); customSet.add('A').add('B').add('C'); for (const item of customSet) { console.log(item); } // Output: "A" "B" "C"
在代码中，我们定义了CustomSet集合，并添加了'A'、'B'和'C'三个元素，然后通过 for...of 循环遍历了集合中的每个元素。
指导意义
Iterator 和 for...of 循环不仅仅可以遍历一些基本的数据结构，它更为复杂的数据结构的遍历提供了一种简单、灵活的方式。在ES6之前，编写这样的代码是异常麻烦的事情，而使用ES6的Iterator和for...of循环，可以用更少的代码来处理类似的问题。
除此之外，ES6的Iterator和for...of循环还提供了一种非常优雅的解决方案，它可以让我们以一种一致的方式迭代元素，而且还具有非常高的可读性和可维护性。大家在开发过程中可以尝试使用这种新的方式来处理数据结构的遍历问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b85e58306f20b3a6614953
