语法高亮,滚动条美化,设置页面调整

This commit is contained in:
fofolee
2019-04-19 02:41:09 +08:00
parent 1e8f76c000
commit 359d29ee0b
1590 changed files with 12328 additions and 11441 deletions

View File

@@ -7,8 +7,8 @@
<p>你也可以使用构造函数  <a href="Reference/Global_Objects/GeneratorFunction" title="GeneratorFunction构造器生成新的生成器函数 对象。在JavaScript中生成器函数实际上都是GeneratorFunction的实例对象。"><code>GeneratorFunction</code></a><a href="Reference/Operators/function*" title="function*关键字可以在表达式内部定义一个生成器函数。"><code>function* expression</code></a> 定义<strong><em>生成器函数</em> </strong></p>
</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> }
</pre>
<pre><code class="language-javascript">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> }
</code></pre>
<dl>
<dt><code>name</code></dt>
<dd>函数名</dd>
@@ -26,7 +26,7 @@
<p>调用一个<strong>生成器函数</strong>并不会马上执行它里面的语句,而是返回一个这个生成器的 <strong>迭代器</strong> <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator</a> )对象</strong>。当这个迭代器的 <code>next() </code>方法被首次(后续)调用时,其内的语句会执行到第一个(后续)出现<a href="Reference/Operators/yield" title="yield 关键字用来暂停和恢复一个生成器函数((function* 或遗留的生成器函数)。"><code>yield</code></a>的位置为止,<a href="Reference/Operators/yield" title="yield 关键字用来暂停和恢复一个生成器函数((function* 或遗留的生成器函数)。"><code>yield</code></a> 后紧跟迭代器要返回的值。或者如果用的是 <a href="Reference/Operators/yield*" title="yield* 表达式用于委托给另一个generator 或可迭代对象。"><code>yield*</code></a>(多了个星号),则表示将执行权移交给另一个生成器函数(当前生成器暂停执行)。</p>
<p><code>next()</code>方法返回一个对象这个对象包含两个属性value 和 donevalue 属性表示本次 <code>yield </code>表达式的返回值done 属性为布尔类型,表示生成器后续是否还有<code> yield </code>语句,即生成器函数是否已经执行完毕并返回。</p>
<p>调用 <code>next()</code>方法时,如果传入了参数,那么这个参数会作为<strong>上一条执行的  yield 语句的返回值</strong>,例如:</p>
<pre class="brush: js">function *gen(){
<pre><code class="language-javascript">function *gen(){
yield 10;
y=yield 'foo';
yield y;
@@ -36,11 +36,11 @@ var gen_obj=gen();
console.log(gen_obj.next());// 执行 yield 10返回 10
console.log(gen_obj.next());// 执行 yield 'foo',返回 'foo'
console.log(gen_obj.next(10));// 将 10 赋给上一条 yield 'foo' 的左值,即执行 y=10返回 10
console.log(gen_obj.next());// 执行完毕value 为 undefineddone 为 true</pre>
console.log(gen_obj.next());// 执行完毕value 为 undefineddone 为 true</code></pre>
<p>当在生成器函数中显式 <code>return </code>时,会导致生成器立即变为完成状态,即调用 <code>next()</code> 方法返回的对象的 <code>done </code><code>true</code>。如果 <code>return </code>后面跟了一个值,那么这个值会作为<strong>当前</strong>调用 <code>next()</code> 方法返回的 value 值。</p>
<h2 id="示例">示例</h2>
<h3 id="简单示例">简单示例</h3>
<pre class="brush: js">function* idMaker(){
<pre><code class="language-javascript">function* idMaker(){
var index = 0;
while(index&lt;3)
yield index++;
@@ -51,9 +51,9 @@ console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined
</pre>
</code></pre>
<h3 id="生成器也可以接收参数:">生成器也可以接收参数:</h3>
<pre class="brush: js">function* idMaker(){
<pre><code class="language-javascript">function* idMaker(){
var index = arguments[0] || 0;
while(true)
yield index++;
@@ -61,9 +61,9 @@ console.log(gen.next().value); // undefined
var gen = idMaker(5);
console.log(gen.next().value); // 5
console.log(gen.next().value); // 6</pre>
console.log(gen.next().value); // 6</code></pre>
<h3 id="yield*的示例">yield*的示例</h3>
<pre class="brush: js">function* anotherGenerator(<strong>i</strong>) {
<pre><code class="language-javascript">function* anotherGenerator(<strong>i</strong>) {
yield i + 1;
yield i + 2;
yield i + 3;
@@ -82,9 +82,9 @@ console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20
</pre>
</code></pre>
<h3 id="传递参数">传递参数</h3>
<pre class="brush: js">function *createIterator() {
<pre><code class="language-javascript">function *createIterator() {
let first = yield 1;
let second = yield first + 2; // <strong>4</strong> + 2
// first =4 是next<strong>(4)将参数赋给上一条的</strong>
@@ -96,9 +96,9 @@ let iterator = createIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next<strong>(4)</strong>); // "{ value: 6, done: false }"
console.log(iterator.next(<strong>5</strong>)); // "{ value: 8, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"</pre>
console.log(iterator.next()); // "{ value: undefined, done: true }"</code></pre>
<h3 id="显式返回">显式返回</h3>
<pre class="brush: js">function* yieldAndReturn() {
<pre><code class="language-javascript">function* yieldAndReturn() {
yield "Y";
return "R";//显式返回处,可以观察到 done 也立即变为了 true
yield "unreachable";// 不会被执行了
@@ -107,13 +107,13 @@ console.log(iterator.next()); // "{ value: undefined, done: true }"</pre>
var gen = yieldAndReturn()
console.log(gen.next()); // { value: "Y", done: false }
console.log(gen.next()); // { value: "R", done: true }
console.log(gen.next()); // { value: undefined, done: true }</pre>
console.log(gen.next()); // { value: undefined, done: true }</code></pre>
<h3 id="生成器函数不能当构造器使用">生成器函数不能当构造器使用</h3>
<pre class="brush: js">function* f() {}
var obj = new f; // throws "TypeError: f is not a constructor"</pre>
<pre><code class="language-javascript">function* f() {}
var obj = new f; // throws "TypeError: f is not a constructor"</code></pre>
<h3 id="使用迭代器遍历二维数组并转换成一维数组:">使用迭代器遍历二维数组并转换成一维数组:</h3>
<blockquote>
<pre class="brush: js">function* iterArr(arr) { //迭代器返回一个迭代器对象
<pre><code class="language-javascript">function* iterArr(arr) { //迭代器返回一个迭代器对象
if (Array.isArray(arr)) { // 内节点
for(let i=0; i &lt; arr.length; i++) {
yield* iterArr(arr[i]); // (*)递归
@@ -131,7 +131,7 @@ for(var x of iterArr(arr)) {
// 或者直接将迭代器展开:
var arr = [ 'a', ['b',[ 'c', ['d', 'e']]]];
var gen = iterArr(arr);
arr = [...gen]; // ["a", "b", "c", "d", "e"]</pre>
arr = [...gen]; // ["a", "b", "c", "d", "e"]</code></pre>
</blockquote>
<h2 id="规范">规范</h2>
<table class="standard-table">