JavaScript迭代器与生成器使用详解

目录

• 迭代器 (Iterator)
• Iterator工作原理
• 自定义遍历数据
• 生成器 (Generator)
• 生成器参数传递
• 使用生成器实现回调地狱功能
• 生成器函数实例
• 生成器—throw()
• 生成器—return()
• 生成器简写

迭代器 (Iterator)

迭代器(Iterator)也叫遍历器，是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作；JS中原有表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又新增了 Map 和 Set，这样就有了四种数据集合。

如果用户组合使用四种不同的数据结构，比如数组的成员是对象或者对象的成员是Map，这样就需要一种统一的接口机制，来处理所有不同的数据结构，这里就需要借助 Iterator ，其作用为：为各种数据结构提供统一简便的访问接口、使数据结构的成员能够按某种次序排列、给ES6新增的遍历方法 for...of 提供消费。

Iterator工作原理

‍需要自定义遍历数据的时候，要想到迭代器，以下是使用原理：

创建一个指针对象，指向当前数据结构的起始位置

第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员

接下来不断调用 next 方法，指针一直往后移动，直到指向最好一个成员

每调用 next 方法返回一个包含 value 和 done 属性的对象

next()方法：返回一个对象，表示当前数据成员的信息。这个对象具有 value 和 done 两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next()方法。

自定义遍历数据

当我们使用 for...of 循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口，其接口默认部署在 Symbol.iterator 属性上，Symbol.iterator属性本身就是一个函数，就是当前数据结构默认遍历器生成函数，执行这个函数就会返回一个遍历器。

生成器 (Generator)

生成器函数是ES6提供的一种异步操作编程方案，语法行为与传统函数完全不同。以前我们进行异步编程的方法就是纯回调函数，Generator函数与普通函数的区别在于：function关键字与函数名之间有一个星号，函数体内部使用yield表达式，具体案例如下：

既然上文代码是一个迭代器对象，我们可以用 for...of 进行一个遍历。

生成器参数传递

生成器是可以进行参数传递的，传递的参数还是需要借助next方法才可以，next方法也是可以传递参数的，传递的参数是作为上一个 yield 的返回结果，说白了就是将原来的值给覆盖了。

Genterator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过next方法的参数，就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。

使用生成器实现回调地狱功能

ES6诞生之前，异步编程大致有四种：回调函数、事件监听、发布/订阅、Promise对象，如下案例讲解回调地狱的实现：

生成器函数实例

生成函数在异步任务这一方面的表现

生成器—throw()

Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。如果生产器函数内部没有部署try...catch代码块，那么抛出的错误会直接被外部的catch代码块捕获。如果 Generator 函数内部和外部，都没有部署try...catch代码块，那么程序将报错，直接中断执行。

生成器—return()

生成器的return方法，可以返回给定的值，并且终结遍历 Generator 函数。

如果 Generator 函数内部有try...finally代码块，且正在执行try代码块，那么return()方法会导致立刻进入finally代码块，执行完以后，整个函数才会结束，调用return()方法后，就开始执行finally代码块，不执行try里面剩下的代码了，然后等到finally代码块执行完，再返回return()方法指定的返回值

生成器简写

如果一个对象的属性是 Generator 函数，可以用如下形式进行简写：

到此这篇关于JavaScript迭代器与生成器使用详解的文章就介绍到这了,更多相关JS迭代器与生成器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！