undefined symbol怎么解决_第十二节 symbol & generator

1.symbol 的含义、作用

先来翻译一下好了解，symbol & generator 分别是什么意思——符号 和 生成器。

以前的6种数据类型有：number、string、boolean、object、undefined、function

new Number(12)

new String()

new Array()

第7种——es6 新增的数据类型：Symbol（使用情况一般，前端使用不多，了解一下）

注意：Symbol 不能 new!

Symbol()返回的是唯一的一个值!

Symbol 一般怎么用：做一个 key，定义一些唯一的或者私有的一些东西！（注意大写）

用 typeof 检测出来的数据类型是：symbol（小写）

symbol 是一个单独的数据类型，就叫 symbol，是基本的类型，不能再拆分。

symbol 作为 key，用 for in 循环遍历不出来。

例子1--symbol的定义和使用

<script>
        let syml=Symbol('aaa');

        console.log(syml);
</script>

打印出来的结果是：Symbol(aaa)

例子2--检测类型

<script>
        let syml=Symbol('aaa');

        console.log(typeof syml);
</script>

打印出来的结果是：symbol

例子3--用法

<script>
        let symbol=Symbol('Strive');

        let json={
            a:'apple',
            b:'banana',
            [symbol]:'aaa'
        };

        console.log(json['a']);
</script>

结果：apple

注意：变量要用[ ]，key 可以做表达式的形式上。

例子4--循环一下试试（json 一般用for in 循环）

    <script>
        let symbol=Symbol('Strive');

        let json={
            a:'apple',
            b:'banana',
            [symbol]:'aaa'
        };

        for(let key in json){
            console.log(key);
        }
    </script>

结果只输出了：a、b

结论：symbol 作为 key（相当于私有的），用 for in 循环遍历不出来。

2.generator 含义及用法

函数：箭头函数：()=>{}

generator 生成器：用于解决异步，深度嵌套的问题。

可以配合使用 for...of...

可以配合解构赋值：let [a,b,c]=gen();

可以配合扩展运算符(三个点)：console.log(...gen());

Array.from:放东西，传成数组

！！ generator 配合 axios 做数据请求：

现在用于解决异步问题较火的是：async

generator函数语法格式：

    <script>
        //定义
        function * gen(){
            yield '';
            yield '';
        }

       //调用
    </script>

例子1--generator

    <script>
        //定义
        function * gen(){
            yield 'welcome';  //一步一步的做称为异步
            yield 'to';       //异步
            return 'China';
        }

        //调用
        // gen();
        //先拿到这个返回值
        let g1=gen();
        console.log(g1);
        
    </script>

结果：返回的是一个对象

例子2--一层一层执行

    <script>
        //定义
        function * gen(){
            yield 'welcome';
            yield 'to';
            return 'China';
        }

        //调用
        // gen();
        //先拿到这个返回值
        let g1=gen();
        console.log(g1.next());  //value: "welcome",done: "false"
        
    </script>

打印出来的结果

例子3--想要它全部执行完

    <script>
        //定义
        function * gen(){
            yield 'welcome';
            yield 'to';
            return 'China';
        }

        //调用
        // gen();
        //先拿到这个返回值
        let g1=gen();
        console.log(g1.next());  //value: "welcome",done: "false"
        console.log(g1.next()); 
        console.log(g1.next()); 
    </script>

结果：全部执行了

上述调用，手动调用，麻烦

例子3--用 for...of...循环（自动执行完）

    <script>
        //定义
        function * gen(){
            yield 'welcome';
            yield 'to';
            return 'China';
        }

        //调用
        let g1=gen();
        
        for(let val of g1){  //自动执行完，注意 return 的东西它不会遍历
            console.log(val);
        }
    </script>

结果

注意：return 的东西，它不会遍历。

例子4--配合解构赋值

    <script>
        //定义
        function * gen(){
            yield 'welcome';
            yield 'to';
            return 'China';
        }

        let [a,b,c]=gen();

        console.log(a,b,c);
    </script>

结果：welcome to undefined，解构的是对应的值，c没有就是undefined。

例子5--扩展运算符（三个点）

    <script>
        function * gen(){
            yield 'welcome';
            yield 'to';
            return 'China';
        }

       console.log(...gen());
 
    </script>

结果：welcome to

例子6--Array.from: 把generator的东西放进去，传成数组

    <script>
        function * gen(){
            yield 'welcome';
            yield 'to';
            return 'China';
        }

       console.log(Array.from(gen()));
 
    </script>

结果

例子7--generator 配合 axios 做数据请求

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //请求数据
        //接口：https://api.gethub.com/user/itstrive

        function * gen(){
            let val=yield 'itstrive';
            yield axios.get(`https://api.gethub.com/user/${val}`)
        }

        //调用
        let g1=gen();

        let username=g1.next().value;
        console.log(username);

        // g1.next(username).value
    </script>

结果：itstrive

完整版-- generator 配合 axios 做数据请求

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //请求数据
        //接口：https://api.gethub.com/user/itstrive

        function * gen(){
            let val=yield 'aaa';
            yield axios.get(`https://api.github.com/users/${val}`);
        }

        //调用
        let g1=gen();

        let username=g1.next().value;
        //console.log(username);

        // console.log(g1.next(username).value); 它是一个promise

        g1.next(username).value.then(res=>{
            console.log(res.data);
        });
    </script>

结果：拿到的数据（比较多，未截完）

3.补充异步问题

异步：上一个操作没有执行完，下一个操作照样开始。

同步：上一个操作没有执行完，下一个操作就没有办法开始。

关于异步，解决问题：

回调函数、事件监听、发布/订阅、promise对象...

ES2017，规定了 async(下一节内容~)

THANK YOU！下节见