ES6-迭代器和生成器

高冷大猛男

已于 2023-05-05 17:02:30 修改

阅读量512

点赞数

文章标签： es6 前端 ecmascript

于 2023-05-05 15:49:18 首次发布

本文链接：https://blog.csdn.net/weixin_60934893/article/details/130506840

版权

一、迭代器概念

遍历器（ Iterator ）就是一种机制。它是一种接口，为各种不同的数据结构提

供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

1) ES6 创造了一种新的遍历命令 for...of 循环， Iterator 接口主要供 for...of 消费

2) 原生具备 iterator 接口的数据 ( 可用 for of 遍历 )

a) Array

b) Arguments

c) Set

d) Map

e) String

f) TypedArray

g) NodeList

3) 工作原理

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

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

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

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

 <script>
     //声明一个数组
     const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];

     //使用 for...of 遍历数组
     for(let v of xiyou){
        console.log(v);
     }

     //使用 for...in 遍历数组
     for(let v in xiyou){
        console.log(v);
     }

    </script>

二、自定义迭代

三、生成器

生成器函数返回的结果是迭代器对象,调用迭代器对象的 next 方法可以得到后面的值。

<script>
     //生成器其实就是一个特殊的函数
     //异步编程 之前用的纯回调函数 例如node fs ajax

     function * gen(){
        console.log("hello generator!")
     }

     let interator = gen();

     interator.next();

    </script>

代码说明：

1) * 的位置没有限制

2) 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到

yield 语句后的值

3) yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next

方法，执行一段代码

4) next 方法可以传递实参，作为 yield 语句的返回值

生成器函数的意义：新的异步编程的解决方案

异步编程：js是单线程，异步单线程，如js的文件搜索，网络操作(ajax、request),数据库操作等，都是异步的。

下图代码会一直回调，会越来越长，产生回调地狱

下图是用生成器完成的代码。

<body>

    <script>
     function one(){
        setTimeout(()=>{
            console.log(111);
            iteartor.next();
        },1000)
       
     }

     function two(){
        setTimeout(()=>{
            console.log(222);
            iteartor.next();
        },2000)
        
     }

     function three(){
        setTimeout(()=>{
            console.log(333);
            iteartor.next();
        },3000)
    
     }

     function * gen(){
        yield one();

        yield two();

        yield three();
     }

     //调用生成器函数
     let iteartor = gen();

     iteartor.next();

    </script>
    
</body>