关于ES6

一.变量声明const和let

1. 变量提升：在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

   function aa() {
       if(flag) {
           var test = 'hello man'
       } else {
           console.log(test)
       }
     }
   //等价于
   function aa() {
       var test // 变量提升，函数最顶部
       if(flag) {
           test = 'hello man'
       } else {
           //此处访问 test 值为 undefined
           console.log(test)
       }
       //此处访问 test 值为 undefined
     }
   //所以不用关心flag是否为 true or false。实际上，无论如何 test 都会被创建声明。

    

2. 通常用 let 和 const 来声明，let 表示变量、const 表示常量。let 和 const 都是块级作用域。即：在一个函数内部或者在一个代码块内部。说白了只要在{}花括号内的代码块即可以认为 let 和 const 的作用域。

    function aa() {
       if(flag) {
          let test = 'hello man'
       } else {
           //test 在此处访问不到
           console.log(test)
       }
     //let 
     //作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
   　//不能重复声明
     //TDZ暂时性死区

   const 声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

   const name = 'aa';
   name = 'bb'
   //再次赋值会报错
   //如果const的是一个对象，对象不可变，但是对象所包含的值是可以被修改的
   //就是对象所指的地址不能改变，变量成员可以修改
   //常在引入模块时使用
   
   const student = { name: 'cc' }
   // 没毛病
   student.name = 'yy'
   //会报错
   student  = { name: 'yy' }

    

3. TDZ暂时性死区，JS引擎扫描代码时，如果发现变量声明，用 var 声明变量时会将声明提升到函数或全局作用域的顶部。但是 let 或者 const，会将声明关进一个小黑屋也是TDZ(暂时性死区)，只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。

   {
           console.log(value) // 报错
           let value = 'lala'
       }

    

4. 应用

   var funcs = []
       for (var i = 0; i < 10; i++) {
           funcs.push(function() { console.log(i) })
       }
       funcs.forEach(function(func) {
           func()
       })
   
   //会输出十次10
   // ES5知识，我们可以利用“立即调用函数”解决这个问题
       var funcs = []
       for (var i = 0; i < 10; i++) {
           funcs.push(
             (function(value) {
               return function() {
                   console.log(value)
               }
           })(i)
         )
       }
       funcs.forEach(function(func) {
           func()
       })
   // 再来看看es6怎么处理的
       const funcs = []
       for (let i = 0; i < 10; i++) {
           funcs.push(function() {
               console.log(i)
           })
       }
       funcs.forEach(func => func())
   

   　　

二.字符串

1. 模板字符串：第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

      //ES5 
       var name = 'lux'
       console.log('hello' + name)
       //es6
       const name = 'lux'
       console.log(`hello ${name}`) //hello lux

   第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

       // ES5
       var msg = "Hi \
       man!
       "
       // ES6
       const template = `<div>
           <span>hello world</span>
       </div>`

    

2. 新增方法：

   // 1.includes：判断是否包含然后直接返回布尔值
       const str = 'hahay'
       console.log(str.includes('y')) // true
   
    // 2.repeat: 获取字符串重复n次
       const str = 'he'
       console.log(str.repeat(3)) // 'hehehe'
       //如果你带入小数, Math.floor(num) 来处理
       // s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理
   
   // 3. startsWith 和 endsWith 判断是否以 给定文本 开始或者结束
       const str =  'hello world!'
       console.log(str.startsWith('hello')) // true
       console.log(str.endsWith('!')) // true
   
   // 4. padStart 和 padEnd 填充字符串，应用场景：时分秒
       setInterval(() => {
           const now = new Date()
           const hours = now.getHours().toString()
           const minutes = now.getMinutes().toString()
           const seconds = now.getSeconds().toString()
           console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`)
       }, 1000)

    

三.函数

1. 函数默认参数设置：

   //es5时
    function action(num) {
           num = num || 200
           //当传入num时，num为传入的值
           //当没传入参数时，num即有了默认值200
           return num
       }
   //但是，num传入为0的时候就是false，但是我们实际的需求就是要拿到num = 0，此时num = 200 明显与我们的实际想要的效果明显不一样
   
   //ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
   function action(num = 200) {
           console.log(num)
       }
       action(0) // 0
       action() //200
       action(300) //300

    

2. 箭头函数：不需要function关键字创建函数，省略return关键字，继承上下文的this关键字，this绑定的是所定义的作用域

   //例如：
       [1,2,3].map(x => x + 1)
       
   //等同于：
       [1,2,3].map((function(x){
           return x + 1
       }).bind(this))

   当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；

   var people = name => 'hello' + name
   //参数name就没有括号
   
   //相对的
    var people = (name, age) => {
           const fullName = 'hello' + name
           return fullName
       } 
     //如果缺少()或者{}就会报错

    例如：函数表达式：

      
   //参数不传参 必须加括号           var fn2 =()=>2;
   //参数传一个 参数代替括号         var fn2 =a=>a+2;
   //参数传两个 必须加括号           var fn2 =（a,b）=>a+b;
   
   
   //返回对象时，返回处要加括号       var fn2 =（a,b）=>({num:a+b});
   //返回值要加判断，大括号里加return var fn2 =（a,b）=>{ if(a>10){ a= 0} return a+b};
   

   　　

3. 不可以当做new构造函数（区别于函数声明与函数表达式），不能使用argument对象。
4. 因为不能使用arguments这个类数组，使用rest参数替代显示。

   function fn（a,...arr）{//rest参数把剩下的实参放到数组中，此为真数组
       console.log(arr.push)
       
   }
   

   　　

四.拓展的对象功能

1. 对象初始化简写：ES5我们对于对象都是以键值对的形式书写，有可能出现键值对重名时,常用于定义组合工具函数

   function people(name, age) {
           return {
               name: name,
               age: age
           };
       }
   //键值对重名，es6简写如下
   function people(name, age) {
           return {
               name,
               age
           };
       }

   ES6 同样改进了为对象字面量方法赋值的语法。

   //ES5为对象添加方法：
   const people = {
           name: 'lux',
           getName: function() {
               console.log(this.name)
           }
       }
   //ES6通过省略冒号与 function 关键字，将这个语法变得更简洁:
   const people = {
           name: 'lux',
           getName () {
               console.log(this.name)
           }
       }

    

2. 浅复制:ES6 对象提供了 Object.assign()这个方法来实现浅复制。Object.assign() 可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

   const objA = { name: 'cc', age: 18 }
       const objB = { address: 'beijing' }
       const objC = {} // 这个为目标对象
       const obj = Object.assign(objC, objA, objB)
   
       // 我们将 objA objB objC obj 分别输出看看
       console.log(objA)   // { name: 'cc', age: 18 }
       console.log(objB) // { address: 'beijing' }
       console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
       console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }
   
       // 是的，目标对象ObjC的值被改变了。
       // so，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
       Object.assign({}, objC, objA, objB)

    

五.数据访问解构

　数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程　

1. 对象与数组：

   //ES5我们提取对象中的信息形式如下：
   const people = {
           name: 'lux',
           age: 20
       }
       const name = people.name
       const age = people.age
       console.log(name + ' --- ' + age)
   //在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量
   
   //对象
       const people = {
           name: 'lux',
           age: 20
       }
    const { name, age } = people
   //与对象中的属性名对应
    console.log(`${name} --- ${age}`)
   //数组
   const color = ['red', 'blue']
   const [first, second] = color
   console.log(first) //'red'
   console.log(second) //'blue'

    

2. 应用：

    var body = request.body
       var username = body.username
       var password = body.password
   //重新解构
    const { body, body: { username, password } } = request

    

   　　

六.Spread Operator 展开运算符

1. 组装对象或者数组：不限制位置

   //数组
       const color = ['red', 'yellow']
       const colorful = [...color, 'green', 'pink']
       console.log(colorful) //[red, yellow, green, pink]
       
       //对象
       const alp = { fist: 'a', second: 'b'}
       const alphabets = { ...alp, third: 'c' }
       console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"}

    

2. 获取数组或者对象除了前几项或者除了某几项的其他项（反写+rest）

       //数组--rest必须放在最后
       const number = [1,2,3,4,5]
       const [first, ...rest] = number
       console.log(rest) //2,3,4,5
       //对象
       const user = {
           username: 'lux',
           gender: 'female',
           age: 19,
           address: 'peking'
       }
       const { username, ...rest } = user
       console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}

    

3. 对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

   const first = {
           a: 1,
           b: 2,
           c: 6,
       }
       const second = {
           c: 3,
           d: 4
       }
       const total = { ...first, ...second }
       console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

    

 

七.import和export

import导入模块、export导出模块

//全部导入
import people from './example'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

注意点：导入的时候有没有大括号的区别是什么

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

 

八.Promise

在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。-------用同步的方式去写异步代码

1. 图片的加载写成Promise对象：

   var preloadImage = function (path) { 
     return new Promise(function (resolve, reject) { 
       var image = new Image(); 
       image.onload = resolve; 
       image.onerror = reject; 
       image.src = path; 
     });
   };

    

2. 异步数据获取：

       
       // 第一部分 数据获取和加工阶段
       var getUserName  = function(){
           return new Promise(function(resolve,reject){
               $.get('xxx.com/getUserName',function(data){
               resolve(data);
           });
       };
       var getMobile  = function(userName){
           return new Promise(function(resolve,reject){
               $.get('xxx.com/getUserMobile?user='+userName,function(data){
                   resolve(data);
               });
           });
       }
       // 第二部分 业务逻辑部分
       getUserName().then(function(userName){
           return getMobile(userName);
       }).then(function(mobile){});
    
   }

    

3. 注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数

   runAsync1()
   .then(function(data){
       console.log(data);
       return runAsync2();
   })
   .then(function(data){
       console.log(data);
       return runAsync3();
   })
   .then(function(data){
       console.log(data);
   });

   function runAsync1(){
       var p = new Promise(function(resolve, reject){
           //做一些异步操作
           setTimeout(function(){
               console.log('异步任务1执行完成');
               resolve('随便什么数据1');
           }, 1000);
       });
       return p;            
   }
   function runAsync2(){
       var p = new Promise(function(resolve, reject){
           //做一些异步操作
           setTimeout(function(){
               console.log('异步任务2执行完成');
               resolve('随便什么数据2');
           }, 2000);
       });
       return p;            
   }
   function runAsync3(){
       var p = new Promise(function(resolve, reject){
           //做一些异步操作
           setTimeout(function(){
               console.log('异步任务3执行完成');
               resolve('随便什么数据3');
           }, 2000);
       });
       return p;            
   }

    

4. 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了，比如我们把上面的代码修改成这样：

   runAsync1()
   .then(function(data){
       console.log(data);
       return runAsync2();
   })
   .then(function(data){
       console.log(data);
       return '直接返回数据';  //这里直接返回数据
   })
   .then(function(data){
       console.log(data);
   });
   //执行数据2的时候直接返回不再执行下去

    

5. reject：前面的例子都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。

   function getNumber(){
       var p = new Promise(function(resolve, reject){
           //做一些异步操作
           setTimeout(function(){
               var num = Math.ceil(Math.random()*10); //生成1-10的随机数
               if(num<=5){
                   resolve(num);
               }
               else{
                   reject('数字太大了');
               }
           }, 2000);
       });
       return p;            
   }
   
   getNumber()
   .then(
       function(data){
           console.log('resolved');
           console.log(data);
       }, 
       function(reason, data){
           console.log('rejected');
           console.log(reason);
       }
   );
   //getNumber函数用来异步获取一个数字，2秒后执行完成，如果数字小于等于5，我们认为是“成功”了，
   //调用resolve修改Promise的状态。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。
   

   　　

6. catch:其实它和then的第二个参数一样，用来指定reject的回调，效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。

   getNumber()
   .then(function(data){
       console.log('resolved');
       console.log(data);
       console.log(somedata); //此处的somedata未定义
   })
   .catch(function(reason){
       console.log('rejected');
       console.log(reason);
   });

   在resolve的回调中，我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。

7. all：romise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

   Promise
   .all([runAsync1(), runAsync2(), runAsync3()])
   .then(function(results){
       console.log(results);
   });

   用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

8. race：all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync1的延时改为1秒来看一下：

   Promise
   .race([runAsync1(), runAsync2(), runAsync3()])
   .then(function(results){
       console.log(results);
   });

   在then里面的回调开始执行时，runAsync2()和runAsync3()并没有停止，仍旧再执行。于是再过1秒后，输出了他们结束的标志。使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，

   //请求某个图片资源
   function requestImg(){
       var p = new Promise(function(resolve, reject){
           var img = new Image();
           img.onload = function(){
               resolve(img);
           }
           img.src = 'xxxxxx';
       });
       return p;
   }
   
   //延时函数，用于给请求计时
   function timeout(){
       var p = new Promise(function(resolve, reject){
           setTimeout(function(){
               reject('图片请求超时');
           }, 5000);
       });
       return p;
   }
   
   Promise
   .race([requestImg(), timeout()])
   .then(function(results){
       console.log(results);
   })
   .catch(function(reason){
       console.log(reason);
   });

   requestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。

    

 

九.Generators

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

Generators最主要的特点就是单线程执行，同步风格的代码编写，同时又允许你将代码的异步特性隐藏在程序的实现细节中。这使得我们可以用非常自然的方式来表达程序或代码的流程，而不用同时还要兼顾如何编写异步代码。

也就是说，通过generator函数，我们将程序具体的实现细节从异步代码中抽离出来（通过next(..)来遍历generator函数），从而很好地实现了功能和关注点的分离。

一个最简单的例子，generator函数内部不需要任何异步执行代码即可完成整个异步过程的调用。

1.  假设你有下面这段代码，可以看到，就算用上jquery，也依然是回调地狱的既视感：

   $.get('a.html',function(dataa) {
       console.log(dataa);
       $.get('b.html',function(datab) {
           console.log(datab);
           $.get('c.html',function(datac) {
               console.log(datac);
           });
       });
   });
   
   // a.html
   // b.html
   // c.html

    

2. 如果使用generator函数来实现上面代码的逻辑：

   function request(url) {
     $.get(url, function(response){
       it.next(response);
     });
   }
   
   function* ajaxs() {
       console.log(yield request('a.html'));
       console.log(yield request('b.html'));
       console.log(yield request('c.html'));
   }
   
   var it = ajaxs();
   
   it.next();
   
   // a.html
   // b.html
   // c.html

   ajaxs函数执行的第一步是request('a.html')，这是一个异步函数，但没关系，JS引擎会耐心等它执行完，它执行的第一步是向a.html发请求，回调执行it.next(response)，也就是把response传递给it.next()，这就有趣味了，这个next是第几个next？第二个。因为最初已经执行了一个了。现在有种什么感觉？没错，迭代的感觉。再复习一下next的参数，.next(response)意味着什么？意味着覆盖上一个yield语句的返回值。然后，yield request('a.html')将迭代暂停，然而下一个迭代已经开始了。

   最终形成了什么？在每一个阶段开始，next(参数)干了两件事，第一件事是用参数覆盖前一个yield语句的值，第二件事是执行本阶段的代码，这样不断迭代下去，最终形成了一个next触发了一串next。这就形成了一个现象：最开始的一个.next()触发了一连串的request函数的执行，无论啥时候我想要执行这一串异步操作，我都只需要两行代码：var it = ajaxs(); it.next();就够了。

3. 生成规则　

   第1步：将所有异步代码的每一步都封装成一个普通的、可以有参数的函数，比如上面的request函数。你可能问，上面例子为啥三个异步代码却只定义了一个request函数？因为request函数能复用的嘛。如果不能复用的话，请老老实实定义三个普通函数，函数内容就是需要执行的异步代码。

   第2步：定义一个生成器函数，把流程写进去，完全的同步代码的写法。生成器函数可以有参数。

   第3步：定义一个变量，赋值为迭代器对象。迭代器对象可以加参数，参数通常将作为流程所需的初始值。

   第4步：变量名.next()。不要给这个next()传参数，传了也没用，因为它找不到上一个yield语句。

4. 与promise相比　

   new Promise(function(resolve) {
       $.get('a.html',function(dataa) {
           console.log(dataa);
           resolve();
       });
   }).then(function(resolve) {
       return new Promise(function(resolve) {
           $.get('b.html',function(datab) {
               console.log(datab);
               resolve();
           });
       });
   }).then(function(resolve) {
       $.get('c.html',function(datac) {
           console.log(datac);
       });
   });

   Promise的写法的优点就是理解起来很简单，每一步中间用then一连就OK。

   Promise的写法的缺点就是各种promise实例对象跟一连串的then，代码量大、行数多，满眼的promise、then、resolve看得头晕，而且每一个then都是一个独立的作用域，传递参数痛苦

   • yield的作用就是暂停，没有别的作用。
     Promises的原理是等待。
   • yield的原理是靠驱动，好比有个领导（就是g()），领导很聪明，他脑袋里装着所有流程，然后他命令你办事，无论办好还是办砸，只要你办完了你就休息。1小时后，你办好了，然后把材料交给领导，这时候你休息（也就是yield），然后领导又去找甲（如果你办砸了，领导就找乙），领导让甲立即办下一个事。甲比如说办砸了，交给了领导，甲就休息了，领导又去找丁（如果甲办的好，领导就去找丙而不是丁）。这样形成递归循环。这种方式保证了执行顺序不会乱。
     按理说，人都休息了，怎么可能事情还能办下去？妙就妙在，甲休息的前一刻，甲把事情交给了领导，由领导继续找人继续做，所以即使甲休息，事情依然可以继续办下去。所以核心是交给领导的这一步（也就是.next()）。
     Promises的原理是，根本没有领导，领导把流程贴到墙上就溜了，员工就按条文办事即可。员工有N个，都是new Promise()，员工无论把事情办好还是办砸，都按照流程把结果告诉别的员工，别的员工都按照流程往下做。
     可以看出来，虽然原理有一点点区别，但是结果相同。
   　
5. async 函数就是 Generator 函数的语法糖。

   var gen = function* (){
     var f1 = yield readFile('./a.txt');
     var f2 = yield readFile('./b.txt');
     console.log(f1.toString());
     console.log(f2.toString());
   };
   
   var asyncReadFile = async function (){
     var f1 = await  readFile('./a.txt');
     var f2 = await  readFile('./b.txt');
     console.log(f1.toString());
     console.log(f2.toString());
   };

   上面的为Generator函数读取两个文件，下面为async/await读取，比较可发现，两个函数其实是一样的，async不过是把Generator函数的*号换成async，yield换成await。

   async function test() {
     return "async 有什么用？";
   }
   const result = test();
   console.log(result) 

   输出：
   Promise { 'async 有什么用？' }
   可以看到，输出的是一个Promise对象！
   所以，async函数返回的是一个Promise对象，如果直接return 一个直接量，async会把这个直接量通过PromIse.resolve()封装成Promise对象。

    

   async的优点：

   （1）内置执行器
   Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。

   （2） 语义化更好
   async 和 await，比起星号和 yield，语义更清楚了。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

   （3）更广的适用性
   yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。

　　      

原文：https://www.cnblogs.com/jaxu/p/6493291.html；

原文：https://www.cnblogs.com/lvdabao/p/es6-promise-1.html；

原文：https://www.jianshu.com/p/287e0bb867ae；

原文：https://www.jianshu.com/p/e0778b004596；

原文：https://www.jianshu.com/p/1c9e9c161612