五分鐘學會generator函數

時間 2021-02-25

標籤 html node dom 函數 spa code orm htm 對象欄目 HTML 简体版

原文原文鏈接

什麼是generator函數?html

常規函數只會返回一個單一值（或者不返回任何值）。而 Generator 能夠按需一個接一個地返回（「yield」）多個值。它們可與 iterable 完美配合使用，從而能夠輕鬆地建立數據流。node

如何建立一個generator函數，代碼以下:dom

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的值;ui

而且，經過調用next()咱們能夠觀察到，生成器對象時可迭代的!spa

yield 與 next 如何交互?繼續往下:code

function* generator() {
    var name = yield "你叫什麼名字?";
    yield `你好${name}`;

}

var iterable = generator();

console.log(
    iterable.next().value,
    iterable.next('李煥英').value
)

//你叫什麼名字?你好李煥英

第一個 .next() 啓動了 generator 的執行……執行到達第一個 yield 。
結果被返回到外部代碼中。
第二個 .next(4) 將 4 做爲第一個 yield 的結果傳遞迴 generator 並恢復 generator 的執行。
...以此類推

嵌套的generator,如何交換控制權，來看《JavaScript忍者祕籍第二版》的很經典的一個例子:orm

<!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>

咱們能夠經過yield* 將當前generator函數的控制權轉移到下一個generator函數中，讓咱們再來看一下不用生成器函數的遍歷方法,代碼以下:htm

<!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:......