获取-文章详情

{
  "data": {
    "art_id": "7950",
    "title": "一个很简短的 JS 生成器入门和用法参考",
    "pubdate": "2019-03-11 09:00:00",
    "aut_id": "1111",
    "content": "<h1 class=\"heading\" data-id=\"heading-0\">生成器函数</h1>\n<p>在写其他 js 代码时会经常用到 <code>debugger</code> 的东西，能够让当前运行的函数暂停住。生成器函数里的 <code>yield</code> 关键词也能使得函数暂停运行，<strong>同时还能用来做数据的输入输出</strong>（如果是 <code>debugger</code>，只能手动去逐个 inspect 变量）。</p>\n<p><code>yield</code> 可以当作“断点”。<code>yield value</code> 除了能当作断点，<strong>还可以向外部输出 value</strong>。</p>\n<p>此外，<code>yield</code> 表达式本身也是可以有值的，也就是说<strong>还可以表示外部传入的数据</strong>。只要外部在调用 <code>next(inputValue)</code> 时输入一个值。\n这就是为什么在赋值语句里，可以用 <code>yield</code> 作为右值（例如，在使用了 react-saga 的项目里到处都是这种玩意儿）。</p>\n<pre><code class=\"hljs js copyable\" lang=\"js\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>* <span class=\"hljs-title\">fn1</span>(<span class=\"hljs-params\"/>)</span>{\n  <span class=\"hljs-keyword\">var</span> data = <span class=\"hljs-keyword\">yield</span> <span class=\"hljs-string\">\"字符串反转器已启动\"</span>\n  <span class=\"hljs-keyword\">yield</span> data.split(<span class=\"hljs-string\">\"\"</span>).reverse().join(<span class=\"hljs-string\">\"\"</span>)\n}\n\n<span class=\"hljs-comment\">// 创建 Generator 对象</span>\n<span class=\"hljs-keyword\">var</span> g = fn1()\n\n<span class=\"hljs-comment\">// 运行函数，直到遇到第一个“断点”（yield 处）</span>\n<span class=\"hljs-built_in\">console</span>.log(g.next())\n\n<span class=\"hljs-comment\">// 上次停顿的位置是 var data = yield \"字符串反转器已启动\"</span>\n<span class=\"hljs-comment\">// 因此可以在继续运行前，使得 (yield \"字符串反转器已启动\") 的值为 \"Hello\"</span>\n<span class=\"hljs-built_in\">console</span>.log(g.next(<span class=\"hljs-string\">\"Hello\"</span>)) \n\n<span class=\"hljs-comment\">// 输出：</span>\n<span class=\"hljs-comment\">// { value: '字符串反转器已启动', done: false }</span>\n<span class=\"hljs-comment\">// { value: 'olleH', done: false }</span>\n<span class=\"copy-code-btn\">复制代码</span></code></pre><h2 class=\"heading\" data-id=\"heading-1\">Generator</h2>\n<p>正如前面的示例，调用一个 <code>function*</code> 生成器函数，会返回一个 Generator 对象（上文的 <code>g</code>）。这个对象<a target=\"_blank\" href=\"https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FIteration_protocols\" rel=\"nofollow noopener noreferrer\">是可迭代对象</a>（最常见的用法，即用于 <code>for of</code> 循环中）。</p>\n<p>此外，可以把它当作一个控制器，控制着一个被 <code>yield</code> 打了断点（而且还没开始运行）的函数。</p>\n<p>Generator 其具备下列方法：</p>\n<ol>\n<li><code>next(inputValue?): { value, done }</code>\n<ul>\n<li>（从头，或者从上次停止的位置）开始运行生成器函数体，直到遇到 <code>yield</code> 或者 <code>return</code></li>\n<li>注意：此函数可以有一个可选的参数 <code>inputValue</code> 。可以在继续运行生成器函数前，为上次停顿所在的 yield 表达式设置一个值。</li>\n</ul>\n</li>\n<li><code>throw(e): { value, done }</code>\n<ul>\n<li>如果生成器函数没开始运行，则等同于原地 throw</li>\n<li>否则，在生成器函数体当前 <code>yield</code> 停顿的位置 throw 一个异常，然后继续运行，直到遇到 <code>yield</code> 、 <code>return</code> 或者未被捕获的异常（见下文）</li>\n</ul>\n</li>\n<li><code>return(value): {value, done}</code>\n<ul>\n<li>强行终止（即使生成器函数还没运行完毕），并指定一个 value 作为返回值</li>\n</ul>\n</li>\n<li><code>[Symbol.iterator]()</code>\n<ul>\n<li>用于迭代协议的。效果同直接调用 <code>next()</code></li>\n</ul>\n</li>\n</ol>\n<h2 class=\"heading\" data-id=\"heading-2\">yield*</h2>\n<p>和 <code>yield</code> 关键词相比，多了一个星号。可以把 <code>yield* another_iterable</code> 当作以下代码语法糖：</p>\n<pre><code class=\"hljs js copyable\" lang=\"js\"><span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> item <span class=\"hljs-keyword\">of</span> another_iterable) {\n  <span class=\"hljs-keyword\">yield</span> item;\n}\n<span class=\"copy-code-btn\">复制代码</span></code></pre><p>也就是说，<strong>在生成器函数里</strong>， <code>yield*</code> 就是针对一个可迭代对象，把它的每一项逐个地 <code>yield</code> 出来。</p>\n<p>有趣的例子：</p>\n<ul>\n<li><code>yield* [1,2,3]</code> 会把3个数字逐个 yield 出来。数组是可迭代的。</li>\n<li><code>yield* \"abcdefg\"</code> 会把这7个字母逐个 yield 出来。字符串也是可迭代对象。</li>\n<li><code>yield* another_generator</code> 相当于把另一个 Generator 的输出，当作自己的输出给一个个 yield 出去了。\n<ul>\n<li>这个有趣的特性可以用来做拦截器之类的应用。</li>\n<li>说到了串联，如果是当前生成器函数想要利用另外一个生成器的返回值，直接调用 <code>another_generator.next().value</code> 就行了</li>\n</ul>\n</li>\n</ul>\n<h2 class=\"heading\" data-id=\"heading-3\">生成器函数内的异常</h2>\n<p>由 <code>next()</code> 或者 <code>throw(e)</code> 可以让生成器函数开始运行。在运行过程中，如果生成器函数里遇到了<strong>未被捕获</strong>的异常（可以是生成器内部自己产生的，或者由外部调用 <code>throw(e)</code> 塞进去的），那么会在外部由 <code>next()</code> 或者 <code>throw(e)</code> 给 throw 出来</p>\n<pre><code class=\"hljs js copyable\" lang=\"js\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>* <span class=\"hljs-title\">test</span>(<span class=\"hljs-params\"/>)</span>{\n  <span class=\"hljs-keyword\">try</span> {\n    <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"inner: Hello\"</span>)\n    <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"inner: GET\"</span> + (<span class=\"hljs-keyword\">yield</span> <span class=\"hljs-string\">\"output1\"</span>))\n  } <span class=\"hljs-keyword\">catch</span> (err) {\n    <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"inner: Caught\"</span>, err)\n  }\n  <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"inner: Done\"</span>)\n  <span class=\"hljs-keyword\">return</span> <span class=\"hljs-string\">\"output 2\"</span>\n}\n\n<span class=\"hljs-keyword\">var</span> g = test()\n<span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"outer: next: \"</span>, g.next(<span class=\"hljs-string\">\"input 1\"</span>))\n<span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"outer: throw: \"</span>, g.throw(<span class=\"hljs-string\">\"err\"</span>))\n<span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"outer: next: \"</span>, g.next(<span class=\"hljs-string\">\"input 2\"</span>))\n<span class=\"copy-code-btn\">复制代码</span></code></pre><p>上面的例子输出如下。注意到由外部提供的 <code>input1</code> 不会被输出，因为那是<strong>生成器函数还没开始运行的时候</strong>传进去的，能传到哪里？没有任何的意义。</p>\n<pre><code class=\"hljs bash copyable\" lang=\"bash\">inner: Hello\nouter: next:  { value: <span class=\"hljs-string\">'output1'</span>, <span class=\"hljs-keyword\">done</span>: <span class=\"hljs-literal\">false</span> }\ninner: Caught err\ninner: Done\nouter: throw:  { value: <span class=\"hljs-string\">'output 2'</span>, <span class=\"hljs-keyword\">done</span>: <span class=\"hljs-literal\">true</span> }\nouter: next:  { value: undefined, <span class=\"hljs-keyword\">done</span>: <span class=\"hljs-literal\">true</span> }\n<span class=\"copy-code-btn\">复制代码</span></code></pre><hr/>\n<blockquote>\n<p><strong>安利</strong></p>\n<p>写了一个 Markdown <strong>编辑器组件，只要一个框，所见即所得</strong>，而且还全面兼容 CodeMirror（一个很强大的代码编辑组件）</p>\n<p>悄悄安利一下： <a target=\"_blank\" href=\"https://link.juejin.im?target=https%3A%2F%2Flaobubu.net%2FHyperMD%2F\" rel=\"nofollow noopener noreferrer\">laobubu.net/HyperMD/</a></p>\n<p>（欢迎来 <a target=\"_blank\" href=\"https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Flaobubu%2Fhypermd%2F\" rel=\"nofollow noopener noreferrer\">GitHub 点赞</a> 或者<a target=\"_blank\" href=\"https://link.juejin.im?target=https%3A%2F%2Flaobubu.net%2Fdonate.html\" rel=\"nofollow noopener noreferrer\">帮我买杯咖啡</a>）</p>\n</blockquote>",
    "aut_name": "黑马先锋",
    "aut_photo": "http://geek.itheima.net/images/user_head.jpg",
    "is_followed": false,
    "is_collected": false,
    "attitude": -1,
    "comm_count": 11,
    "read_count": 149,
    "like_count": 0
  },
  "message": "OK"
}