ES6 中新增了 Iterator 和 Generator，它们在前端开发中非常实用。本文将详解这两个特性，并提供一些示例代码来帮助大家学习。
Iterator 迭代器
Iterator 迭代器是 ES6 中的一个新特性，它提供了一种统一的遍历访问数据结构的方式。换句话说，迭代器就是一种可以循环访问集合中每个元素的机制，而无需关心底层具体的数据结构。
Iterator 的原理
Iterator 可以遍历任何数据结构，只需要该数据结构定义了遍历规则即可。我们称为实现了迭代器协议。迭代器协议是 ES6 中的一个协议规范，主要包含两个方法：
- next()：返回迭代器下一个元素的结果对象
{value: xx, done: true/false}
value 表示返回的迭代值，done 表示迭代器是否完成遍历。 - Symbol.iterator：返回该数据结构的迭代器对象
Iterator 的使用
下面是一个自定义迭代器的示例，它可以循环遍历数组中的所有元素，并使用 next() 方法获取当前元素的结果对象。
-- -------------------- ---- ------- ----- --- - --- -- -- -- --- -------- ------------------- - --- --------- - -- ------ - ----- ---------- - ------ --------- - ------------ - ------- ------------------- ----- ------ - ------ ------ - -- - ----- -- - ------------------ ----------------------------- -- -- - ----------------------------- -- -- - ----------------------------- -- -- - ----------------------------- -- -- - ----------------------------- -- -- - ---------------------------- -- -- ----展开代码
Iterator 的应用
Iterator 的应用非常广泛，我们来看两个具体的应用场景。
1. for...of 循环遍历数据结构
for...of 循环是 ES6 中新引入的循环语法，它可以直接对支持迭代器协议的数据结构进行循环。以下是一个示例，它可以循环遍历数组中的所有元素。
const arr = [1, 2, 3, 4, 5]; for (let val of arr) { console.log(val); }
2. 解构赋值
解构赋值是 ES6 中的另一个语法特性，它可以方便地将一个数据结构中的元素解析出来并赋值给变量。以下是一个示例，它可以使用解构赋值语法将数组中的所有元素赋值给变量 a、b、c。
const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c); // 输出 1 2 3
Generator 生成器
Generator 生成器是 ES6 中另一个非常实用的特性，它可以用来创建可暂停执行的函数。换句话说，生成器可以控制函数的执行顺序，并且可以在执行过程中进行暂停、继续和停止操作。
Generator 的基本用法
以下是一个生成器函数的示例代码，我们可以使用关键字 function 后面加上一个星号 * 来定义该函数为生成器。
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ----- -- - ----- -------- - ------ ----------------------------------- -- -- - ----------------------------------- -- -- - ----------------------------------- -- -- -展开代码
生成器函数中使用了 yield 关键字，它的作用是在函数的执行过程中暂停并返回对应的值，再次执行时可以从上一次暂停的位置继续执行。
Generator 实现异步操作
Generator 最常用的应用场景是实现异步操作。以下是一个使用 Generator 实现异步操作的示例，它可以实现按照一定的顺序打印出异步调用的结果。
-- -------------------- ---- ------- --------- ----- - --- - ----- ---- - ----- ----------- ------------------ ----- ---- - ----- ----------- ------------------ ----- ---- - ----- ----------- ------------------ - ----- --- - ----------------- - - -------- ---------- - ------ --- --------------- -- - ------------- -- -------------------- ------ --- - -------- ---------- - ------ --- --------------- -- - ------------- -- -------------------- ------ --- - -------- ---------- - ------ --- --------------- -- - ------------- -- -------------------- ------ --- - ----- -------- - ------ -------- ------------------- - ----- ------ ------ - ----- -- ------ ------- ----- ------- - ------ ---------------- -- - ---------------------------------- -- --- -- - -------------------- --- - -------------------------------展开代码
结语
本文详细介绍了 ES6 中的 Iterator 和 Generator 特性，并提供了一些示例代码来帮助大家学习。希望能对大家在前端开发中使用这些特性提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bec91a0c976d473a3080ab
