ES6异步方案之generator详解

最新推荐文章于 2020-04-02 01:03:25 发布

Blockchain Explorer

最新推荐文章于 2020-04-02 01:03:25 发布

阅读量215

点赞数

分类专栏： JavaScript/ES6/NodeJS 文章标签： generator

本文链接：https://blog.csdn.net/TDCQZD/article/details/82430956

版权

JavaScript/ES6/NodeJS 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

一、Symbol

1、基本介绍
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型：

undefined、null、Boolean、String、Number、Symbol、Object

该类型的性质在于这个类型的值可以用来创建匿名的对象属性。该数据类型的值通常被用作一个对象属性的键, symbol 类型的键存在于各种内置的 JavaScript 对象中。

在 JavaScript 运行时环境中，symbol类型的值可以通过调用函数 Symbol() 创建。这个函数动态地生成了一个匿名，唯一的值。

2、内置函数Symbol()

Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册。

但一定要注意了，Symbol不是一个构造器，它并不能被new关键字调用。

每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。

3、Symbol作为属性名

Symbol类型唯一合理的用法是用变量存储 symbol的值，然后使用存储的值创建对象属性。以下示例使用”var”创建一个变量来保存 symbol

语法：

 //第一种写法
let mySymbol = Symbol();
let a = {};
a[mySymbol] = 'Hello!'; 
//第二种写法
let a = {
  [mySymbol]: 'Hello!'
};
//第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
//以上写法都得到同样结果
a[mySymbol] // "Hello!"

symbol属性是匿名的；并且是不可枚举的.不会在循环结构 for-in 中出现。也因为这个属性是匿名的，它同样不会出现在Object.getOwnPropertyNames(obj)的返回数组里。
这个属性可以通过创建时的原始 symbol 值访问到，或者通过遍历 “Object.getOwnPropertySymbols()” 返回的数组。

4、Symbol.for
Symbol.for(key) 方法会根据给定的键 key，来从运行时的 symbol 注册表中找到对应的 symbol，如果找到了，则返回它，否则，新建一个与该键关联的 symbol，并放入全局 symbol 注册表中
5、Symbol.keyFor
Symbol.keyFor(sym) 方法用来获取注册表中与某个 symbol 关联的键。
sym：存储在 symbol 注册表中的某个 symbol

6、Symbol.iterator
Symbol.iterator 为一些对象定义了默认的迭代器。该迭代器可以被 for…of 循环使用。
本质上Symbol.iterator是一个属性名（Symbol类型的属性）,对应的属性值是一个函数（迭代器）。函数调用后的返回值是一个迭代器对象！

7、代码实例
01_Symbol.html

<script>
    var sym1 = Symbol("foo");
    var sym2 = Symbol("bar");
    console.log(typeof sym1,sym1);
    console.log(sym1 === sym2,sym1,sym2);

    var eat = Symbol("eat");
    var obj ={
        name:"damu",
        wife:"zdy",
        [eat]:function () {
            console.log("eat")
        }
    }

    console.log(obj[eat]())


</script>

02_Symbol-for.html

<script>
    //sym1会被存储到全局symbol注册表
    var sym1 = Symbol.for("foo");
    var sym2 = Symbol.for("foo");
    console.log(sym1 ===sym2 )


    //keyFor

    console.log(Symbol.keyFor(Symbol.for("foo")))





</script>

03_Symbol迭代器.html

<script>

    // console.log(typeof  Symbol.iterator);

    var arr = ["a","b","c","d"];

   /* arr.map(function (item) {
        console.log(item)
    })*/

   // for of : arr[Symbol.iterator]().next().value
   /*for(item of arr){
       console.log(item);
   }*/

    //iterator函数        迭代器
    //调用迭代器         迭代器对象
    //迭代器对象.next()  迭代对象
   var it = arr[Symbol.iterator]();
   console.log(it.next().value);
   console.log(it.next().value);
   console.log(it.next().value);
   console.log(it.next());
   console.log(it.next());
   console.log(it.next());
   console.log(it.next());
   console.log(it.next());
   console.log(it.next());





</script>

二、Iterator

1、基本介绍
遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）

2、 Iterator 的作用有三个：

一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是 ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费

3、迭代器协议
当一个对象被认为是一个迭代器时，它实现了一个 next() 的方法并且拥有以下含义：
迭代器的next方法会返回一个迭代对象，它具有两个属性

    done (boolean)：
            迭代是否结束
    value：
            当前迭代的值

4、iterable
对象进行for…of循环时，会调用Symbol.iterator方法（迭代器），返回该对象的默认迭代器对象。一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。就可以用for…of循环遍历它的成员。也就是说，for…of循环内部调用的是数据结构的Symbol.iterator方法
原生具备 Iterator 接口的数据结构如下。

             Array
            String
            函数的 arguments 对象
            NodeList 对象
            Map
            Set

5、for of循环
for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

6、代码示例：
01_Iterator.html

<script>
    //1. 迭代器函数
    //2. 迭代器对象  next
    //3. 迭代对象

    var arr = ["a","b","c"];


    function iteratorArr(arr) {
        var index = 0;
        return{
            next:function () {
                return index < arr.length? {value:arr[index++],done:false}:{value:undefined,done:true}
            }
        }
    }

    var it = iteratorArr(arr);

    console.log(it.next().value)
    console.log(it.next().value)
    console.log(it.next().value)
    console.log(it.next().value)
    console.log(it.next().value)


</script>

02_Iterator-of.html

<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>
<script>
    var str = "123";

    for (item of str){
        console.log(item);
    }

    var nodes = document.querySelectorAll("ul > li");
    for (item of nodes){
        console.log(item);
    }


    console.log(str[Symbol.iterator])
    console.log(nodes[Symbol.iterator])
</script>

03_iterable-Obj.html

<script>
    var obj = {
        name:"damu",
        age:"18"
    }

    Object.prototype[Symbol.iterator]=function () {
        var arr =[];

        for (var item in this){
            arr.push(this[item])
        }


        var index = 0;
        return{
            next:function () {
                return index < arr.length? {value:arr[index++],done:false}:{value:undefined,done:true}
            }
        }
    }

    //obj[Symbol.iterator]().next().value
    for(item of obj){
        console.log(item)
    }
</script>

三、generator函数

1、基本介绍
function* 这种声明方式(function关键字后跟一个星号）会定义一个函数 (生成器)，调用它后会返回一个生成器对象。生成器对象符合可迭代协议。第一次调用生成器对象的next方法时, generator函数才会被执行

2、yield
yield关键字使生成器函数执行暂停。yield关键字会和一个迭代对象挂钩，迭代对象有两个属性，value和done。value属性是对yield表达式求值的结果，而done是false，表示生成器函数尚未完全完成。yield关键字后面的表达式的值返回给生成器对象的next方法对应的value。
next方法对应的value是谁，取决于next方法执行后在哪个yield表达式上暂停

每次调用生成器的next()方法时，生成器都会恢复执行,如果将可选值传递给生成器的next()方法，则该值将成为生成器当前yield启动时返回的值。
next方法对应的参数给谁，取决于next方法执行后在哪个yield表达式上启动

四、基本流程

Function * test() 生成器函数调用时不会立即执行而是返回一个生成器对象；
什么时候生成器函数的函数体会被执行？
生成器对象的next方法被调用时, 执行生成器函数的函数体
什么时候生成器函数的函数体会暂停等待？
遇到yield表达式就暂停。下一次调用next方法时就重新启动。

五、数据传递

1、Yield后面表达式的值给谁?
看哪一个next方法在我身上暂停，就会把当前这个值跟next方法的value

2、Yield表达式自身的值给谁?
看哪一个next方法在在我身上启动，就会把当前next方法的第一个参数赋值给返回值。

3、数据传递案例：

<script>
    //test:迭代器函数

    //1.yield表达式的值给谁  哪一个next方法在我身上暂停 我就把值给谁
    //2. next方法的第一个参数给谁？   next方法在哪一个yield表达式上启动
    function * test() {
       var y1 =  yield  setTimeout(function (flag) {
            if(flag){
                console.log("success-1");
                var val =   it.next(flag);
                console.log(val)
            }else{
                console.log("error-1")
            }
        },1000,true);

        var y2 = yield setTimeout(function (flag) {
            if(flag){
                console.log("success-2");
                var val =  it.next(flag);
                console.log(val)
            }else{
                console.log("error-2")
            }
        },1000,y1);

        yield setTimeout(function (flag) {
            if(flag){
                console.log("success-3")
            }else{
                console.log("error-3")
            }
        },1000,!y2);
    }
    var it = test();
    var val = it.next();
    console.log(val)



</script>