在前端开发中，Iterator（迭代器）、Generator（生成器）和Async/Await（异步/等待）是常用的编程技术。它们被广泛应用于JavaScript中，可以帮助我们更好地管理代码流程，增加程序的可读性和可维护性。
Iterator（迭代器）
Iterator是一种允许我们按照特定方式遍历数据集合的机制。Javascript中有多种数据结构都实现了Iterator接口，比如数组、Map、Set等等。通过使用Iterator，我们可以像遍历数组一样遍历其他数据结构，并且不需要知道这些数据结构内部的具体实现。
假设我们有一个数组，要对其中的元素进行处理，我们可以使用for循环遍历每个元素：
const arr = [1, 2, 3, 4]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
但是在ES6之后，我们还可以使用Iterator来实现相同的功能：
const arr = [1, 2, 3, 4]; const iter = arr[Symbol.iterator](); let result = iter.next(); while (!result.done) { console.log(result.value); result = iter.next(); }
这里，我们首先通过arr[Symbol.iterator]()获取到了一个Iterable对象，然后使用next()方法逐个遍历元素。
Generator（生成器）
Generator是一种特殊的函数，可以在执行时暂停并保留当前上下文。Generator函数返回的是一个迭代器对象，我们可以使用该对象来控制Generator函数的执行流程。
Generator函数定义方式与普通函数不同，以function*开头，并且可以通过yield关键字来暂停函数执行并返回值。下面是一个简单的示例：
-- -------------------- ---- ------- --------- ----- - ----- ---- ----- ---- ----- ---- - ----- ---- - ------ ------------------------------- -- --- ------------------------------- -- --- ------------------------------- -- ---展开代码
这里，我们定义了一个Generator函数gen()，并且使用yield将其分成了三个部分。然后我们使用迭代器对象来逐个打印每个部分的返回值。每次调用next()方法会使函数执行到下一个yield语句，并返回其值。
Async/Await（异步/等待）
Async/Await是ES7引入的一种异步编程机制，可以让我们更加方便地编写异步代码。在实际开发中，很多操作都是异步的，比如从服务器获取数据、读取本地文件等等。使用Async/Await可以使得我们的代码更加清晰和易于理解。
Async函数是Generator的语法糖，它会将函数的返回值包装成Promise对象，我们可以使用await关键字等待Promise对象的返回结果。下面是一个使用Async/Await实现异步操作的示例：
async function fetchData() { const data = await fetch('/api/data'); const json = await data.json(); return json; } fetchData().then(data => console.log(data));
这里，我们定义了一个fetchData()函数，其中包含两个await关键字，分别等待了俩个异步操作返回结果。在执行完异步操作后，该函数会将结果打包成一个Promise对象并返回。最后我们通过调用该函数并使用.then()方法来获取结果。
总结
Iterator、Generator和Async/Await都是非常有用的编程技巧，它们可以帮助我们更好地管理代码流程，从而提高程序的可读性和可维护性。对于需要处理大量数据或执行耗时操作的应用场景，使用这些技术可以使得代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35777
