码迷,mamicode.com
首页 > 其他好文 > 详细

446 generator

时间:2020-04-14 20:17:56      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:求值   def   jquer   cti   异步编程   语句   hello   char   example   

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Generator函数</title>
</head>

<body>

    <!--
   Generator函数
    概念:
      1、ES6提供的解决异步编程的方案之一
      2、Generator函数是一个状态机,内部封装了不同状态的数据 【状态:yield语句】
      3、用来生成遍历器对象 【iterator对象】
      4、可暂停函数(惰性求值), yield可暂停,next方法可启动,每次返回的是yield后的表达式结果。


    特点:
      1、function 与 函数名 之间有一个星号

      2、内部用yield表达式来定义不同的状态
      例如:
        function* generatorExample(){
          let result = yield ‘hello‘;  // 状态值为hello
          yield ‘generator‘; // 状态值为generator
        }

      3、generator函数返回的是指针对象(接11章节里iterator),而不会执行函数内部逻辑

      4、调用next方法,函数内部逻辑开始执行,遇到yield表达式停止,返回 {value: yield后的表达式结果/undefined, done: false/true}

      5、再次调用next方法会从上一次停止时的yield处开始,直到最后

      6、yield语句返回结果通常为undefined, 当调用next方法时,传参内容会作为启动时yield语句的返回值。
  -->

    <script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        // 小试牛刀
        function* generatorTest() {
            console.log(‘函数开始执行‘);
            yield ‘hello‘;
            console.log(‘函数暂停后再次启动‘);
            yield ‘generator‘;
            console.log(‘结束‘)
        }

        // 生成遍历器对象 【generatorTest是生成器函数,Gt是生成器对象】
        let Gt = generatorTest();
        console.log(Gt); // 遍历器对象 generatorTest?

        let result = Gt.next(); // 函数执行, 遇到yield暂停
        console.log(result); // {value: "hello", done: false}

        result = Gt.next(); // 函数再次启动
        console.log(result); // {value: ‘generator‘, done: false}

        result = Gt.next();
        console.log(result); // {value: undefined, done: true} 表示函数内部状态已经遍历完毕


        // 对象的Symbol.iterator属性, 指向该对象的默认遍历器方法 【原本对象是不能用for of遍历的。】
        let myIterable = {};
        myIterable[Symbol.iterator] = function* () {
            yield 1;
            yield 2;
            yield 4;
        };

        for (let i of myIterable) {
            console.log(i); // ?1 2 4 
        }

        let obj = [...myIterable];
        console.log(obj); // ?[1, 2, 4]


        console.log(‘-------------------------------‘);

        // 案例练习
        /*
        * 需求:
        * 1、发送ajax请求获取新闻内容
        * 2、新闻内容获取成功后再次发送请求,获取对应的新闻评论内容
        * 3、新闻内容获取失败则不需要再次发送请求。
        * 
        * */
        function* sendXml() {
            // url为next传参进来的数据
            let url = yield getNews(‘http://localhost:3000/news?newsId=2‘);
            yield getNews(url);
        }

        function getNews(url) {
            $.get(url, function (data) {
                console.log(data);
                let commentsUrl = data.commentsUrl;
                let url = ‘http://localhost:3000‘ + commentsUrl;
                // 当获取新闻内容成功,发送请求获取对应的评论内容
                // 调用next传参会作为上次暂停是yield的返回值
                sx.next(url);
            })
        }

        let sx = sendXml();
        // 发送请求获取新闻内容
        sx.next();
    </script>
</body>

</html>

446 generator

标签:求值   def   jquer   cti   异步编程   语句   hello   char   example   

原文地址:https://www.cnblogs.com/jianjie/p/12700418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!