ECMAScript6入门简述&索引篇（摘自阮一峰的《ECMAScript 6 入门》）

痛定思痛。 2022-07-14 18:53 314阅读 0赞

## 函数扩展 ##

1、**函数参数可以有默认值**

function log(x, y = 'World') { 
      console.log(x, y);
    }

2、**rest参数**

rest参数的形式为：“…变量名”，用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

3、**扩展运算符**

扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

4、**箭头函数**

var f = v => v;

等同于

var f = function(v) { 
      return v;
    };

另外，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。也就是说，箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法。

详见：  
[http://es6.ruanyifeng.com/\#docs/function][http_es6.ruanyifeng.com_docs_function]

## Promise 对象 ##

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件（callback）——更合理、更强大。

基本用法：

var promise = new Promise(function(resolve, reject) {
      // ... some code
    
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
    reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。

promise.then(function(value) { 
      // success
    }, function(error) { 
      // failure
    });
    
    then方法可以接受两个回调函数作为参数。
    第一个回调函数是Promise对象的状态变为Resolved时调用，
    第二个回调函数是Promise对象的状态变为Reject时调用。
    其中，第二个函数是可选的，不一定要提供。
    这两个函数都接受Promise对象传出的值作为参数。

详细说明参见：[http://es6.ruanyifeng.com/\#docs/promise][http_es6.ruanyifeng.com_docs_promise]

## Generator 函数的语法 ##

Generator 函数是 ES6 提供的一种异步编程解决方案。

从语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。  
执行 Generator 函数会返回一个遍历器对象，也就是说，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 }

由于Generator函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield语句就是暂停标志。

由于Generator函数就是遍历器生成函数，因此可以把Generator赋值给对象的Symbol.iterator属性，从而使得该对象具有Iterator接口。

详细内容参见：[http://es6.ruanyifeng.com/\#docs/generator][http_es6.ruanyifeng.com_docs_generator]

## async 函数 ##

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

详细内容见：  
[http://es6.ruanyifeng.com/\#docs/async][http_es6.ruanyifeng.com_docs_async]

## Module ##

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

// ES6模块
    import { stat, exists, readFile } from 'fs';

// profile.js
    export var firstName = 'Michael';
    export var lastName = 'Jackson';
    export var year = 1958;

详细见：  
[http://es6.ruanyifeng.com/\#docs/module][http_es6.ruanyifeng.com_docs_module]

[http_es6.ruanyifeng.com_docs_function]: http://es6.ruanyifeng.com/#docs/function
[http_es6.ruanyifeng.com_docs_promise]: http://es6.ruanyifeng.com/#docs/promise
[http_es6.ruanyifeng.com_docs_generator]: http://es6.ruanyifeng.com/#docs/generator
[http_es6.ruanyifeng.com_docs_async]: http://es6.ruanyifeng.com/#docs/async
[http_es6.ruanyifeng.com_docs_module]: http://es6.ruanyifeng.com/#docs/module