es6

骑猪看日落 2022-08-23 04:47 149阅读 0赞

**1.http://pythontutor.com/visualize.html\#mode=display 超好用的在线调试工具**

2.let

增加块级作用域吧相当于，跟var不同

const

3.Set 构造函数，类似于数组，没有重复数据。

Map.js中object 提供的是字符串--值的模式，map提供 值--值的模式;

4.Generator

Generator函数是一个状态机，封装了多个内部状态。

形式上，Generator函数是一个普通函数，但是有两个特征。一是，`function`关键字与函数名之间有一个星号；二是，函数体内部使用`yield`语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。

function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator();

上面代码定义了一个Generator函数`helloWorldGenerator`，它内部有两个`yield`语句“hello”和“world”，即该函数有三个状态：hello，world和return语句（结束执行）。

然后，Generator函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一章介绍的遍历器对象（Iterator Object）。

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用`next`方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个`yield`语句（或`return`语句）为止。换言之，Generator函数是分段执行的，`yield`语句是暂停执行的标记，而`next`方法可以恢复执行。

hw.next() // { value: 'hello', done: false } hw.next() // { value: 'world', done: false } hw.next() // { value: 'ending', done: true } hw.next() // { value: undefined, done: true }

上面代码一共调用了四次`next`方法。

第一次调用，Generator函数开始执行，直到遇到第一个`yield`语句为止。`next`方法返回一个对象，它的`value`属性就是当前`yield`语句的值hello，`done`属性的值false，表示遍历还没有结束。

第二次调用，Generator函数从上次`yield`语句停下的地方，一直执行到下一个`yield`语句。`next`方法返回的对象的`value`属性就是当前`yield`语句的值world，`done`属性的值false，表示遍历还没有结束。

第三次调用，Generator函数从上次`yield`语句停下的地方，一直执行到`return`语句（如果没有return语句，就执行到函数结束）。`next`方法返回的对象的`value`属性，就是紧跟在`return`语句后面的表达式的值（如果没有`return`语句，则`value`属性的值为undefined），`done`属性的值true，表示遍历已经结束。

第四次调用，此时Generator函数已经运行完毕，`next`方法返回对象的`value`属性为undefined，`done`属性为true。以后再调用`next`方法，返回的都是这个值。

总结一下，调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。以后，每次调用遍历器对象的`next`方法，就会返回一个有着`value`和`done`两个属性的对象。`value`属性表示当前的内部状态的值，是`yield`语句后面那个表达式的值；`done`属性是一个布尔值，表示是否遍历结束。

ES6没有规定，`function`关键字与函数名之间的星号，写在哪个位置。这导致下面的写法都能通过。

function * foo(x, y) { ··· } function *foo(x, y) { ··· } function* foo(x, y) { ··· } function*foo(x, y) { ··· }

由于Generator函数仍然是普通函数，所以一般的写法是上面的第三种，即星号紧跟在`function`关键字后面。本书也采用这种写法。

Generator函数可以不用`yield`语句，这时就变成了一个单纯的暂缓执行函数。

function* f() { console.log('执行了！') } var generator = f(); setTimeout(function () { generator.next() }, 2000);

上面代码中，函数`f`如果是普通函数，在为变量`generator`赋值时就会执行。但是，函数`f`是一个Generator函数，就变成只有调用`next`方法时，函数`f`才会执行。

5.promise

Promise对象是一个构造函数，用来生成Promise实例。

上面的代码实现的功能非常简单，`helloWord` 函数接受一个参数，如果为 `true` 就打印 "Hello World!"，如果为 `false` 就打印错误的信息。`helloWord` 函数返回的是一个 Promise 对象。

在 Promise 对象当中有两个重要方法————`resolve` 和 `reject`。

`resolve` 方法可以使 Promise 对象的状态改变成成功，同时传递一个参数用于后续成功后的操作，在这个例子当中就是 Hello World!字符串。

`reject` 方法则是将 Promise 对象的状态改变为失败，同时将错误的信息传递到后续错误处理的操作。

### Promise 的三种状态 ###

上面提到了 `resolve` 和 `reject` 可以改变 Promise 对象的状态，那么它究竟有哪些状态呢？

Promise 对象有三种状态：

*  Fulfilled 可以理解为成功的状态
 *  Rejected 可以理解为失败的状态
 *  Pending 既不是 Fulfilld 也不是 Rejected 的状态，可以理解为 Promise 对象实例创建时候的初始状态

helloWorld 的例子中的 `then` 方法就是根据 Promise 对象的状态来确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject 时执行第二个函数（onRejected）。

上述例子通过链式调用的方式，按顺序打印出了相应的内容。`then` 可以使用链式调用的写法原因在于，每一次执行该方法时总是会返回一个 Promise 对象。另外，在 `then` onFulfilled 的函数当中的返回值，可以作为后续操作的参数，因此上面的例子也可以写成：

全选
       
        复制
       
        放进笔记
      
       var p1 = new Promise(function (resolve) {
        setTimeout(function () {
            resolve("Hello");
        }, 3000);
    });
    
    var p2 = new Promise(function (resolve) {
        setTimeout(function () {
            resolve("World");
        }, 1000);
    });
    
    Promise.all([p1, p2]).then(function (result) {
        console.log(result); // ["Hello", "World"]
    });