您的位置:首页 > 技术中心 > 前端框架 >

JavaScript前端迭代器Iterator与生成器Generator讲解

时间:2022-08-22 17:46

本篇文章给大家带来了关于JavaScript的相关知识,其中主要为大家介绍了JavaScript前端迭代器Iterator与生成器Generator讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助。

【相关推荐:javascript视频教程、web前端】

Iterator 概念

Iterator 提供了一种统一的接口机制,为各种不同数据结构提供统一的访问机制。

定义 Iterator 就是提供一个具有 next() 方法的对象,每次调用 next() 都会返回一个结果对象,该结果对象有两个属性,value 表示当前的值,done 表示遍历是否结束。

  1. function makeIterator(Array){
  2. let index = 0;
  3. return {
  4. next: function(){
  5. return (
  6. Array.length > index ?
  7. {value: Array[index++]}:
  8. {done: true}
  9. )
  10. }
  11. }
  12. }
  13. let iterator = makeIterator(['1','2'])
  14. console.log(iterator.next()); // {value: '1'}
  15. console.log(iterator.next()); // {value: '2'}
  16. console.log(iterator.next()); // {done: true}

Iterator 的作用:

  • 为各种数据结构,提供一个统一的、简便的访问接口;
  • 使得数据结构的成员能够按某种次序排列;
  • 供 for...of 消费

默认 Iterator 接口

ES6 提供了 for of 语句遍历迭代器对象,我们将上述创建的迭代器使用 for of 语句遍历一下:

  1. let iterator = makeIterator(['1','2'])
  2. for (let value of iterator) {
  3. console.log(value);
  4. } // iterator is not iterable

结果报错说 iterator is not iterable,这是为什么呢? ES6 规定默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性中,如果一个数据结构存在 Symbol.iterator 属性,则该数据结构可遍历。

我们将自定义的 makeIterator 改造如下:

  1. const MakeIterator = (Array) => ({
  2. [Symbol.iterator](){
  3. let index = 0;
  4. return {
  5. next(){
  6. let length = Array.length;
  7. if(index < length){
  8. return {value: Array[index++]}
  9. }else{
  10. return {done: true}
  11. }
  12. }
  13. }
  14. }
  15. })
  16. for(let value of MakeIterator([1,2])){
  17. console.log(value)
  18. }
  19. // 1
  20. // 2

Iterator 的 return()

我们为 MakeIterator 添加 return 方法,如果 for...of 循环提前退出(通常是因为出错,或者有 break 语句),就会调用 return() 方法,终止遍历。

基于这一特性,如果一个对象在完成遍历前,需要清理或释放资源,我们可以部署 return() 方法,列入文件读取失败时关闭文件。

  1. const MakeIterator = (Array) => ({
  2. [Symbol.iterator](){
  3. let index = 0;
  4. return {
  5. next(){
  6. let length = Array.length;
  7. if(index < length){
  8. return {value: Array[index++]}
  9. }else{
  10. return {done: true}
  11. }
  12. },
  13. return(){
  14. return {done: true}
  15. }
  16. }
  17. }
  18. })
  19. for(let value of MakeIterator([1, 2, 3])){
  20. console.log(value) // 1
  21. // 方式1
  22. break;
  23. // 方式2
  24. // throw new Error('error');
  25. }

原生具备 Iterator 接口的数据结构

  • 数组
  • Set
  • Map
  • 类数组对象,如 arguments 对象、DOM NodeList 对象、typedArray 对象
  1. // arguments 对象
  2. function sum(){
  3. for(let value of arguments){
  4. console.log(value)
  5. }
  6. }
  7. sum(1,2)
  8. // 1
  9. // 2
  10. // typedArray 对象
  11. let typeArry = new Int8Array(2);
  12. typeArry[0] = 1;
  13. typeArry[1] = 2;
  14. for(let value of typeArry){
  15. console.log(value)
  16. }
  17. // 1
  18. // 2
  • Generator 对象
  1. function* gen(){
  2. yield 1;
  3. yield 2;
  4. }
  5. for(let value of gen()){
  6. console.log(value)
  7. }
  • String

Q: 为什么 Object 不具有原生 Iterator ?

A: 对象(Object)之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的。

本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。

不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作 Map 结构使用,ES5 没有 Map 结构,而 ES6 原生提供了。

调用 Iterator 接口的场合

  • 解构赋值
  1. let set = new Set().add('a').add('b').add('c');
  2. let [x,y] = set; // x='a'; y='b'
  • 扩展运算符
  1. var str = 'hello';
  2. [...str] // ['h','e','l','l','o']

扩展运算符是调用 Iterator 接口,那么 Object 没有部署 Iterator 接口,为什么也能使用 ... 运算符呢?

原因:扩展运算符分为两种

  • 一种是用在函数参数、数组展开的场合,这种情况要求对象是可迭代的(iterable)
  • 另一种是用于对象展开,也就是 {…obj} 形式,这种情况需要对象是可枚举的(enumerable)
  1. let obj1 = {
  2. name: 'qianxun'
  3. }
  4. let obj2 = {
  5. age: 3
  6. }
  7. // 数组对象是可枚举的
  8. let obj = {...obj1, ...obj2}
  9. console.log(obj) //{name: 'qianxun', age: 3}
  10. // 普通对象默认是不可迭代的
  11. let obj = [...obj1, ...obj2]
  12. console.log(obj) // object is not iterable

模拟实现 for of

  1. function forOf(obj, cb){
  2. let iteratorValue = obj[Symbol.iterator]();
  3. let result = iteratorValue.next()
  4. while(!result.done){
  5. cb(result.value)
  6. result = iteratorValue.next()
  7. }
  8. }
  9. forOf([1,2,3], (value)=>{
  10. console.log(value)
  11. })
  12. // 1
  13. // 2
  14. // 3

Generator

认识 Generator

  • 概念上

Generator 函数是 ES6 提供的一种异步编程解决方案。Generator 函数是一个状态机,封装了多个内部状态;

Generator 函数还是一个遍历器对象生成函数,执行后返回一个遍历器对象。

  • 形式上

1.function 关键字与函数名之间有一个星号;

2.函数体内部使用 yield 表达式,定义不同的内部状态。

  1. function* simpleGenerator(){
  2. yield 1;
  3. yield 2;
  4. }
  5. simpleGenerator()

如上我们创建了一个简单的 Generator,我们带着两个问题进行探究:

  • Generator 函数运行后会发生什么?
  • 函数中的 yield 表达式有什么作用?
  1. function* simpleGenerator(){
  2. console.log('hello world');
  3. yield 1;
  4. yield 2;
  5. }
  6. let generator = simpleGenerator(); // simpleGenerator {&lt;suspended}}
  7. console.log(generator.next())
  8. // hello world
  9. // {value: 1, done: false}
  10. console.log(generator.next())
  11. // {value: 2, done: false}

Generator 生成器函数运行后返回一个生成器对象,而普通函数会直接执行函数内部的代码;每次调用生成器对象的 next 方法会执行函数到下一次 yield 关键字停止执行,并且返回一个 {value: Value, done: Boolean} 的对象。

next 方法的参数

yield 表达式本身没有返回值,或者说总是返回 undefined。next 方法可以带一个参数,该参数就会被当作上一个 yield 表达式的返回值。通过 next 方法的参数,可以在 Generator 函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。 由于 next 方法的参数表示上一个 yield 表达式的返回值,所以在第一次使用 next 方法时,传递参数是无效的。

  1. function sum(x){
  2. return function(y){
  3. return x + y;
  4. }
  5. }
  6. console.log(sum(1)(2))
  7. // 利用next传参改写
  8. function* sum(x){
  9. let y = yield x;
  10. while(true){
  11. y = yield x + y;
  12. }
  13. }
  14. let gen = sum(2)
  15. console.log(gen.next()) // 2
  16. console.log(gen.next(1)) // 3
  17. console.log(gen.next(2)) // 4

yield 表达式

yield 表达式的作用:定义内部状态和暂停执行 yield 表达式 与 return 语句的区别

  • yield 表达式表示函数暂停执行,下一次再从该位置继续向后执行,而 return 语句不具备位置记忆的功能
  • 一个函数里,只能执行一个 return 语句,但是可以执行多个 yield 表达式
  • 任何函数都可以使用 return 语句,yield 表达式只能用在 Generator 函数里面,用在其他地方都会报错
  • yield 表达式如果参与运算放在圆括号里面;用作函数参数或放在赋值表达式的右边,可以不加括号
  1. function *gen () {
  2. console.log('hello' + yield) ×
  3. console.log('hello' + (yield)) √
  4. console.log('hello' + yield 1) ×
  5. console.log('hello' + (yield 1)) √
  6. foo(yield 1) √
  7. const param = yield 2 √
  8. }

基于 Generator 生成器函数中可以支持多个 yield,我们可以实现一个函数有多个返回值的场景:

  1. function* gen(num1, num2){
  2. yield num1 + num2;
  3. yield num1 - num2;
  4. }
  5. let res = gen(2, 1);
  6. console.log(res.next()) // {value: 3, done: false}
  7. console.log(res.next()) // {value: 1, done: false}

Generator 与 Iterator 之间的关系

由于 Generator 函数就是遍历器生成函数,因此可以把 Generator 赋值给对象的 Symbol.iterator 属性,从而使得该对象具有 Iterator 接口。Generator 实现方式代码更加简洁。

  1. let obj = {
  2. name: 'qianxun',
  3. age: 3,
  4. [Symbol.iterator]: function(){
  5. let that = this;
  6. let keys = Object.keys(that)
  7. let index = 0;
  8. return {
  9. next: function(){
  10. return index < keys.length ?
  11. {value: that[keys[index++]], done: false}:
  12. {value: undefined, done: true}
  13. }
  14. }
  15. }
  16. }
  17. for(let value of obj){
  18. console.log(value)
  19. }

Generator:

  1. let obj = {
  2. name: 'qianxun',
  3. age: 3,
  4. [Symbol.iterator]: function* (){
  5. let keys = Object.keys(this)
  6. for(let i=0; i< keys.length; i++){
  7. yield this[keys[i]];
  8. }
  9. }
  10. }
  11. for(let value of obj){
  12. console.log(value)
  13. }

Generator.prototype.return()

return()方法,可以返回给定的值,并且终结遍历 Generator 函数。

  1. function* gen() {
  2. yield 1;
  3. yield 2;
  4. yield 3;
  5. }
  6. var g = gen();
  7. g.next() // { value: 1, done: false }
  8. // 如果 return() 方法调用时,不提供参数,则返回值的 value 属性为 undefined
  9. g.return('foo') // { value: "foo", done: true }
  10. g.next() // { value: undefined, done: true }

如果 Generator 函数内部有 try...finally 代码块,且正在执行 try 代码块,那么 return() 方法会导致立刻进入 finally 代码块,执行完以后,整个函数才会结束。

  1. function* numbers () {
  2. yield 1;
  3. try {
  4. yield 2;
  5. yield 3;
  6. } finally {
  7. yield 4;
  8. yield 5;
  9. }
  10. yield 6;
  11. }
  12. var g = numbers();
  13. g.next() // { value: 1, done: false }
  14. g.next() // { value: 2, done: false }
  15. g.return(7) // { value: 4, done: false }
  16. g.next() // { value: 5, done: false }
  17. g.next() // { value: 7, done: true }

yield* 表达式

如果想在 Generator 函数内部,调用另一个 Generator 函数。我们需要在前者的函数体内部,自己手动完成遍历,如果函数调用多层嵌套会导致写法繁琐不易阅读,ES6 提供了 yield* 表达式作为解决方法。

委托给其他生成器

  1. function* g1() {
  2. yield 2;
  3. yield 3;
  4. }
  5. function* g2() {
  6. yield 1;
  7. yield* g1();
  8. yield 4;
  9. }
  10. const iterator = g2();
  11. console.log(iterator.next()); // { value: 1, done: false }
  12. console.log(iterator.next()); // { value: 2, done: false }
  13. console.log(iterator.next()); // { value: 3, done: false }
  14. console.log(iterator.next()); // { value: 4, done: false }
  15. console.log(iterator.next()); // { value: undefined, done: true }

委托给其他可迭代对象

  1. function* gen(){
  2. yield* [1,2,3]
  3. }
  4. console.log(gen().next()) // {value: 1, done: false}

Generator 函数的 this

Generator 函数返回一个遍历器,ES6 规定这个遍历器是 Generator 函数的实例,继承了 Generator.prototype 对象上的方法,但无法获取 this 上的属性,因为这时 this 是全局对象,而不是实例对象。

  1. function* gen(){
  2. this.a = 1
  3. }
  4. gen.prototype.say = function(){
  5. console.log('hi')
  6. }
  7. let obj = gen()
  8. console.log(obj instanceof gen) // true
  9. obj.say() // hi
  10. obj.next()
  11. console.log(obj.a) //undefined

如果想像构造函数一样访问实例属性,可以修改 this 绑定到 Generator.prototype 上。

  1. function* gen(){
  2. this.a = 1
  3. }
  4. gen.prototype.say = function(){
  5. console.log('hi')
  6. }
  7. let obj = gen.call(gen.prototype)
  8. console.log(obj instanceof gen) // true
  9. obj.say() // hi
  10. obj.next()
  11. console.log(obj.a) //1

Generator 实现一个状态机

  1. function* StateMachine(state){
  2. let transition;
  3. while(true){
  4. if(transition === "INCREMENT"){
  5. state++;
  6. }else if(transition === "DECREMENT"){
  7. state--;
  8. }
  9. transition = yield state;
  10. }
  11. }
  12. const iterator = StateMachine(0);
  13. console.log(iterator.next()); // 0
  14. console.log(iterator.next('INCREMENT')); // 1
  15. console.log(iterator.next('DECREMENT')); // 0

【相关推荐:javascript视频教程、web前端】

以上就是JavaScript前端迭代器Iterator与生成器Generator讲解的详细内容,更多请关注gxlsystem.com其它相关文章!

热门排行

今日推荐

热门手游