什么是generator函数?

常规函数只会返回一个单一值（或者不返回任何值）。 而 Generator 可以按需一个接一个地返回（“yield”）多个值。它们可与 iterable 完美配合使用，从 而可以轻松地创建数据流。

如何创建一个generator函数，代码如下:

function* generator() {

    yield 1;

    yield '宋远溪';

    yield {name:'宋远溪'}

}

generator函数如何使用?继续往下:

function* generator() {

    yield 1;

    yield '宋远溪';

    yield {name:'宋远溪'}

}

const genFn = generator();

console.log(

    genFn.next(),

    genFn.next(),

    genFn.next()

)

//{ value: 1, done: false } { value: '宋远溪', done: false } { value: { name: '宋远溪' }, done: false }

由代码可以观察到，与普通函数不同的是generator函数调用会返回一个生成器对象，通过调用生成器对象的next(),可以返回generator函数体中的yield的值;

并且，通过调用next()我们可以观察到，生成器对象时可迭代的!

yield 与 next 如何交互?继续往下:

function* generator() {

    var name = yield "你叫什么名字?";

    yield `你好${name}`;

}

var iterable = generator();

console.log(

    iterable.next().value,

    iterable.next('李焕英').value

)

//你叫什么名字?你好李焕英
  1. 第一个 .next() 启动了 generator 的执行……执行到达第一个 yield 。
  2. 结果被返回到外部代码中。
  3. 第二个 .next(4) 将 4 作为第一个 yield 的结果传递回 generator 并恢复 generator 的执 行。
  4. ...以此类推

嵌套的generator,如何交换控制权，来看《JavaScript忍者秘籍第二版》的很经典的一个例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Generator函数</title>

</head>

<body>

    <div id="box">

        <form action="">

            <label for="">

                <input type="text">

            </label>

            <button>提交</button>

        </form>

        <p>Generator</p>

    </div>

    <script>

        var box = box || document.getElementById('box');

        function* traverseTree(element) {

            yield element;

            element = element.firstElementChild;

            while (element) {

                yield* traverseTree(element);

                element = element.nextElementSibling;

            }

        }

        const subTree = traverseTree(box);

        for (const element of subTree) {

            console.log(element.nodeName);

            /**

             * DIV

             * FORM

             * LABEL

             * INPUT

             * BUTTON

             * P

            */

        }

    </script>

</body>

</html>

让我们再来看一下不用生成器函数的遍历方法,代码如下:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Generator函数</title>

  </head>

  <body>

    <div id="box">

      <form action="">

        <label for="">

          <input type="text" />

        </label>

        <button>提交</button>

      </form>

      <p>Generator</p>

    </div>

    <script>

      var box = box || document.getElementById("box");

      function domTraverse(element, callback) {

        callback(element);

        element = element.firstElementChild;

        while (element) {

          domTraverse(element, callback);

          element = element.nextElementSibling;

        }

      }

      domTraverse(box, (element) => {

        console.log(element.nodeName);

        /**

         * DIV

         * FORM

         * LABEL

         * INPUT

         * BUTTON

         * P

         */

      });

    </script>

  </body>

</html>

通过这两段代码可以看出，我们通过生成器函数将生产值(HTML节点) 与消费值(for 循环打印 访问过的节点名称)的代码分隔开，使得代码解耦;

我们还可以通过generator抛出错误，代码如下:

function* generator() {

    try {

        var result = yield '你喜欢JavaScript吗';

        if (result == '喜欢')

            yield '太棒了!'

        else

            yield '真遗憾'

    }catch(e) {

        console.log('出错了!');

        console.log(e);

    }

}

const gen = generator();

console.log(

    gen.next(),

)

gen.throw(new Error('故意抛出错误!'));

//出错了，Error:......

五分钟学会generator函数的更多相关文章

  1. [分享] 史上最简单的封装教程，五分钟学会封装系统（以封装Windows 7为例）

    [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...

  2. 一门能让你五分钟学会的语言-Brainfuck

    看到标题,不出意外的话,你肯定开始骂我了:**标题党,什么编程语言五分钟就能学会? 其实我本来也是不相信的,但是学过了才知道这是真的. 1.Brainfuck 看到这个小标题,不要误会,我没有骂人. ...

  3. 五分钟学会Python装饰器，看完面试不再慌

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题的第12篇文章,我们来看看Python装饰器. 一段囧事 差不多五年前面试的时候,我就领教过它的重要性.那时候我Pyt ...

  4. 喝咖啡写脚本,顺便再加一点点CSS语法糖 2.五分钟学会Less

    CoffeeScript + Html5 + Less这个新组合,看上去Less更容易拿下,先尝尝糖吧. Less这么小个东西,竟然要FQ,真是没有天理,简直不可理喻,先不管那么多了,那就看这个吧.h ...

  5. 五分钟学会 Kotlin 语法

    为什么使用Kotlin 项目一期在收尾了终于有时间折腾了,一个多月以来Kotlin从入门到现在,坚持用来开发的切身感受.因为语法与Java的区别挺大的一开始很想放弃,如果不是因为项目在使用,想必很少人 ...

  6. 10分钟学会Python函数基础知识

    看完本文大概需要8分钟,看完后,仔细看下代码,认真回一下,函数基本知识就OK了.最好还是把代码敲一下. 一.函数基础 简单地说,一个函数就是一组Python语句的组合,它们可以在程序中运行一次或多次运 ...

  7. 五分钟学会centos配置gitlab

    下载gitlab 亲测: centos6.5 安装依赖包: : yum install curl policycoreutils policycoreutils-python openssh-serv ...

  8. 五分钟学会悲观乐观锁-java vs mysql vs redis三种实现

    1 悲观锁乐观锁简介 乐观锁( Optimistic Locking ) 相对悲观锁而言,乐观锁假设认为数据一般情况下不会造成冲突,所以在数据进行提交更新的时候,才会正式对数据的冲突与否进行检测,如果 ...

  9. 五分钟学会HTML5的WebSocket协议

    1.背景   很多网站为了实现推送技术,所用的技术都是Ajax轮询.轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器.这种传统的模式带来很明显的缺点 ...

随机推荐

  1. 2021 年写 JavaScript 代码的 17 个优化技巧

    我们经常会写一些 JavaScript 代码,但是如何写出干净又易维护的代码呢?本文将讲解 17 个 JavaScript 代码的技术帮助你提高编程水平,此外,本文可以帮助您为 2021 年的 Jav ...

  2. 【Spring-Security】Re01 入门上手

    一.所需的组件 SpringBoot项目需要的POM依赖: <dependency> <groupId>org.springframework.boot</groupId ...

  3. 每个开发人员都应该知道的WebSockets知识

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/deep-dive-into-websockets- ...

  4. Hyperbase常用SQL

    1.创建表 1.1 建HBase内表 CREATE TABLE hbase_inner_table(   key1 string,   bi bigint,   dc decimal(10,2),   ...

  5. Codeforces Round #625 (Div. 2, based on Technocup 2020 Final Round) D. Navigation System（有向图，BFS，最短路）

    题意: n 点 m 边有向图,给出行走路径,求行走途中到路径终点最短路变化次数的最小值和最大值 . 思路 : 逆向广搜,正向模拟. #include <bits/stdc++.h> usi ...

  6. 【noi 2.6_9267】核电站（DP）

    题意:n个数中不能同时选连续m个或以上,问方案数. 解法:f[i][j]表示从前i个中选,到第i个已经连续选了j个.j!=0时,  =f[i-1][j-1] ; j=0时, =f[i-1][0~m-1 ...

  7. 西南民族大学第十二届程序设计竞赛（同步赛） A.逃出机房 (bfs)

    题意:有来两个人A和B,A追B,A和B每次向上下左右移动一个单位,一共有两扇门,问A是否可以追上B(在门口追上也算合法). 题解:当时看题意说在门口也算?就觉得是判断两个人到门口的时间,对他们两个人分 ...

  8. CodeForces - 1140C

    题意: 给你n首歌,每首歌有一个长度ti和一个愉悦度bi,你最多可以从中挑选出来k首歌.那么你挑选出来这首歌会为你增加sum歌愉悦度,sum的求法就是:挑选出来所有歌的长度之和,乘与挑选出来所有歌中愉 ...

  9. Intelligent IME HDU - 4287 字典树

    题意: 给你m个字符串,每一个字符对应一个数字,如下: 2 : a, b, c    3 : d, e, f    4 : g, h, i    5 : j, k, l    6 : m, n, o ...

  10. XV6学习（15）Lab mmap: Mmap

    代码在Github上. 这一个实验是要实现最基础的mmap功能.mmap即内存映射文件,将一个文件直接映射到内存当中,之后对文件的读写就可以直接通过对内存进行读写来进行,而对文件的同步则由操作系统来负 ...