ES6-generator

1 个人理解

生成器（将一个函数拆分成好多小函数）重要标志 function *show(){} *位置不讲究
讲解 generator函数中间可以停(出租车),踹一脚走一步普通函数,一路到底(飞机)

1.1 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>generator函数</title>
    <script>
        function* show() {
            alert('a');
            yield;
            alert('b');
        };
        let genObj = show();
        alert(genObj);
        genObj.next();
        genObj.next();
    </script>
</head>
<body>
</body>
</html>

2.yield拆分

2.1 个人理解

伪代码:
function *炒菜(菜市场买回来的){
    洗菜->洗好的菜;

    let 干净的菜=yield 洗好的菜;

    干净的菜->切成丝;

    let 切好的菜= yield 切成丝;

    切好的菜->炒好的菜;

    return 炒好的菜;
}

2.2 可以传参，可使用字符模板化的形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yield</title>
    <script>
        function* show() {
            alert('a');
            let a = yield;
            alert('b');
            alert(a);
        };
        let genObj = show();
        alert(genObj);
        genObj.next(12);
        // 第一个没有办法存储起来12
        genObj.next(5);
        // 使用老办法获取第一个参数
        function* show2(num1, num2) {
            alert(`${num1},${num2}`);
            alert('a');
            yield;
            alert('b');
            return;
        };
        let genObj2 = show2(99, 88);
        alert(genObj2);
    </script>
</head>
<body>
</body>
</html>

2.3 可以返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yield</title>
    <script>
        function* show() {
            alert('a');
            let a = yield;
            alert('b');
            alert(a);
        };
        let genObj = show();
        alert(genObj);
        console.log(genObj.next()); //{value:12,done:false}
        // 第一个没有办法存储起来12
        console.log(genObj.next()); //{value:undefined,done:true}
        // 使用老办法获取第一个参数
    </script>
</head>
<body>
</body>
</html>

1 个人理解

1.1 代码如下

2.yield拆分

2.1 个人理解

2.2 可以传参，可使用字符模板化的形式

2.3 可以返回

猜你喜欢