ES6基础学习——第二天(Symbol 的基本使用、迭代器、生成器、Promise 基本语法)

目录
1. Symbol 的基本使用
2. 迭代器
3. 生成器
4. Promise 基本语法

---

知识一：Symbol 的基本使用

• ES6引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。
• Symbol 特点：
• Symbol的值是唯一的，用来解决命名冲突的问题
• Symbol值不能与其他数据进行运算
• Symbol定义的对象属性不能使用for …in循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

    <script>
        //创建Symbol
        let s = Symbol();
        // console.log(s, typeof s);
        let s2 = Symbol('尚硅谷');
        let s3 = Symbol('尚硅谷');
        console.log(s2 === s3)        //false
        //Symbol.for 创建
        let s4 = Symbol.for('尚硅谷');
        let s5 = Symbol.for('尚硅谷');
        console.log(s4 === s5)      //true

        //不能与其他数据进行运算，会直接报错
        //    let result = s + 100;
        //    let result = s > 100;
        //    let result = s + s;

    </script>

知识二：迭代器

• 工作原理：
• 创建一个指针对象，指向当前数据结构的起始位置。第一次调用对象的next方法，指针自动指向数据结构的第一个成员，接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员，每调用next方法返回一个包含value和 done属性的对象

    <script>
        //声明一个数组
        const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];

        //使用 for...of 遍历数组  保存的是键值，for in 是键名
        // for(let v of xiyou){
        //     console.log(v);
        // }

        //对象进行 for...of循环时,会调用Symbol.iterator方法,返回该对象的默认遍历器
        let iterator = xiyou[Symbol.iterator]();

        //调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
    </script>

知识三：生成器

• *的位置没有限制，生成器函数返回的结果是迭代器对象,调用迭代器对象的next方法可以得到yield语句后的值，yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次next方法，执行一段代码，next方法可以传递实参，作为yield 语句的返回值

    <script>    
        //生成器其实就是一个特殊的函数
        //异步编程  纯回调函数  node fs  ajax mongodb
        //函数代码的分隔符
        function * gen(){
            yield '一只没有耳朵';
            yield '一只没有尾部';
            yield '真奇怪';
        }

        let iterator = gen();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

        //遍历
        for(let v of gen()){
            console.log(v);
        }

    </script>

• next方法可以传递实参，作为yield 语句的返回值

    <script>
        function * gen(arg){
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let three = yield 333;
            console.log(three);
        }

        //执行获取迭代器对象
        let iterator = gen('AAA');
        console.log(iterator.next());
        //next方法可以传入实参
        console.log(iterator.next('BBB'));
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));
        
    </script>

生成器实例

    <script>
        // 异步编程  文件操作 网络操作(ajax, request) 数据库操作
        // 1s 后控制台输出 111  2s后输出 222  3s后输出 333 
        // 回调地狱
        // setTimeout(() => {
        //     console.log(111);
        //     setTimeout(() => {
        //         console.log(222);
        //         setTimeout(() => {
        //             console.log(333);
        //         }, 3000);
        //     }, 2000);
        // }, 1000);

        function one(){
            setTimeout(()=>{
                console.log(111);
                iterator.next();
            },1000)
        }

        function two(){
            setTimeout(()=>{
                console.log(222);
                iterator.next();
            },2000)
        }

        function three(){
            setTimeout(()=>{
                console.log(333);
                iterator.next();
            },3000)
        }

        function * gen(){
            yield one();
            yield two();
            yield three();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

    </script>

知识四：Promise 基本语法

    <script>
        //实例化 Promise 对象
        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                //
                // let data = '数据库中的用户数据';
                // resolve
                // resolve(data);

                let err = '数据读取失败';
                reject(err);
            }, 1000);
        });

        //调用 promise 对象的 then 方法
        p.then(function(value){
            console.log(value);
        }, function(reason){
            console.error(reason);
        })
    </script>

• 其实就是在 function(resolve, reject){}这个函数内进行实现一些特殊功能（不只是定时器），若成功，就用 resolve 设置成功状态，否则就用 reject 设置失败状态，然后调用 then 方法提示

---

点击回到顶部