Node.js从入门到实战ECMAScript6一页纸总结（很大的一页纸）

一、ES5/ES6和babel

ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化，现在的浏览器已经相当于完全实现了这个标准。
ECMAScript6，即ES6，也称ES2015，是ECMAScript的第六次修订，于2015年完成，并且运用的范围逐渐开始扩大，因为其相对于ES5更加简洁，提高了开发速率，开发者也都在陆续进行使用，但是由于ES6还存在一些支持的问题，所以一般即使是使用ES6开发的工程，也需要使用Babel进行转换。
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这一过程叫做“源码到源码”编译， 也被称为转换编译。

一般来说Babel作为依赖包被引入ES6工程中，此处不再介绍以cli方式使用的ES6，如果你需要以编程的方式来使用 Babel，可以使用 babel-core 这个包。babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。babel的使用过程如下：

1. 首先安装 babel-core。

 

$ npm install babel-core

2. 在文件开头引入babel：

 

var babel = require("babel-core");

3. 文件转换

字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译。

1.  
   babel.transform("code();", options);
2.  
   // => { code, map, ast }

如果是文件的话，可以使用异步 api：

1.  
   babel.transformFile("filename.js", options, function(err, result) {
2.  
   result; // => { code, map, ast }
3.  
   });

或者是同步 api：

1.  
   babel.transformFileSync("filename.js", options);
2.  
   // => { code, map, ast }

或者在development环境下可以使用bable-node和bable-register的方式配置，过程如下：

1. 添加依赖

 

在Node.js工程package.json包中添加如下依赖：

 

1.  
   "devDependencies": {
2.  
   "babel-cli": "^6.26.0",
3.  
   "babel-eslint": "^8.0.1",
4.  
   "babel-plugin-transform-flow-strip-types": "^6.22.0",
5.  
   "babel-preset-es2015": "^6.24.1",
6.  
   "babel-register": "^6.26.0",
7.  
   ...
8.  
   }

 

2. 配置dev脚本

 

1.  
   "scripts": {
2.  
   "serve-dev": "NODE_ENV=development nodemon ./src/index.js --exec babel-node",
3.  
   },

接下来罗列一下ES6的语法要点参考备用。

 

二、let, const

这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。
首先来看下面这个例子：

1.  
   var name = 'zach'
2.  
    
3.  
   while (true) {
4.  
   var name = 'obama'
5.  
   console.log(name) //obama
6.  
   break
7.  
   }
8.  
    
9.  
   console.log(name) //obama

使用var 两次输出都是obama，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

 

 

1.  
   let name = 'zach'
2.  
    
3.  
   while (true) {
4.  
   let name = 'obama'
5.  
   console.log(name) //obama
6.  
   break
7.  
   }
8.  
    
9.  
   console.log(name) //zach

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量，看下面的例子：

 

1.  
   var a = [];
2.  
   for (var i = 0; i < 10; i++) {
3.  
   a[i] = function () {
4.  
   console.log(i);
5.  
   };
6.  
   }
7.  
   a[6](); // 10

上面代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

1.  
   var a = [];
2.  
   for (let i = 0; i < 10; i++) {
3.  
   a[i] = function () {
4.  
   console.log(i);
5.  
   };
6.  
   }
7.  
   a[6](); // 6

const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。

1.  
   const PI = Math.PI
2.  
    
3.  
   PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

三、解构赋值

 

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

1.  
   let [a, b, c] = [1, 2, 3];
2.  
   let [foo, [[bar], baz]] = [1, [[2], 3]];
3.  
   foo // 1
4.  
   bar // 2
5.  
   baz // 3
6.  
   let [ , , third] = ["foo", "bar", "baz"];
7.  
   third // "baz"
8.  
   let [head, ...tail] = [1, 2, 3, 4];
9.  
   head // 1
10.  
    tail // [2, 3, 4]

解构不成功时变量赋值为undefined

1.  
   let [x, y, ...z] = ['a'];
2.  
   x // "a"
3.  
   y // undefined
4.  
   z // []

存在不完全解构的情况如下：

 

1.  
   let [x, y] = [1, 2, 3];
2.  
   x // 1
3.  
   y // 2
4.  
    
5.  
   let [a, [b], d] = [1, [2, 3], 4];
6.  
   a // 1
7.  
   b // 2
8.  
   d // 4

解构赋值允许指定默认值。ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

 

1.  
   let [x = 1] = [undefined];
2.  
   x // 1
3.  
    
4.  
   let [x = 1] = [null];
5.  
   x // null

如下是解构赋值的应用实例：

 

1.  
   let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
2.  
   baz // "aaa"
3.  
    
4.  
   let obj = { first: 'hello', last: 'world' };
5.  
   let { first: f, last: l } = obj;
6.  
   f // 'hello'
7.  
   l // 'world'
8.  
    
9.  
   let arr = [1, 2, 3];
10.  
    let {0 : first, [arr.length - 1] : last} = arr; //属性名表达式
11.  
    first // 1
12.  
    last // 3
13.  
     
14.  
    function add([x, y]){
15.  
    return x + y;
16.  
    }
17.  
     
18.  
    add([1, 2]); // 3 //函数入参也可进行解构
19.  
     
20.  
    // 返回一个数组
21.  
     
22.  
    function example() {
23.  
    return [1, 2, 3];
24.  
    }
25.  
    let [a, b, c] = example();
26.  
     
27.  
    let jsonData = {
28.  
    id: 42,
29.  
    status: "OK",
30.  
    data: [867, 5309]
31.  
    };
32.  
     
33.  
    let { id, status, data: number } = jsonData;
34.  
     
35.  
    // 获取键名
36.  
    for (let [key] of map) {
37.  
    // ...
38.  
    }
39.  
     
40.  
    // 获取键值
41.  
    for (let [,value] of map) {
42.  
    // ...
43.  
    }

如下两种函数的定义方法在解构赋值时具备不同的返回值：

 

1.  
   function m1({x = 0, y = 0} = {}) {
2.  
   return [x, y];
3.  
   }
4.  
    
5.  
   // 写法二
6.  
   function m2({x, y} = { x: 0, y: 0 }) {
7.  
   return [x, y];
8.  
   }

1.  
   // x 有值，y 无值的情况
2.  
   m1({x: 3}) // [3, 0]
3.  
   m2({x: 3}) // [3, undefined]
4.  
    
5.  
   // x 和 y 都无值的情况
6.  
   m1({}) // [0, 0];
7.  
   m2({}) // [undefined, undefined]
8.  
    
9.  
   m1({z: 3}) // [0, 0]
10.  
    m2({z: 3}) // [undefined, undefined]

四、模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

1.  
   // 普通字符串
2.  
   `In JavaScript ' ' is a line-feed.`
3.  
    
4.  
   // 多行字符串
5.  
   `In JavaScript this is
6.  
   not legal.`
7.  
    
8.  
   console.log(`string text line 1
9.  
   string text line 2`);
10.  
     
11.  
    // 字符串中嵌入变量
12.  
    let name = "Bob", time = "today";
13.  
    `Hello ${name}, how are you ${time}?`

如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

 

let greeting = `\`Yo\` World!`;

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

标签模板

 

模板字符串它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

1.  
   let a = 5;
2.  
   let b = 10;
3.  
    
4.  
   tag`Hello ${ a + b } world ${ a * b }`;
5.  
   // 等同于
6.  
   tag(['Hello ', ' world ', ''], 15, 50);

模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。函数tag依次会接收到多个参数。

1.  
   function tag(stringArr, value1, value2){
2.  
   // ...
3.  
   }
4.  
   // 等同于
5.  
   function tag(stringArr, ...values){
6.  
   // ...
7.  
   }

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。也就是说，tag函数实际上以下面的形式调用。

tag(['Hello ', ' world ', ''], 15, 50)

五、rest参数

 

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

1.  
   // arguments变量的写法
2.  
   function sortNumbers() {
3.  
   return Array.prototype.slice.call(arguments).sort();
4.  
   }
5.  
    
6.  
   // rest参数的写法
7.  
   const sortNumbers = (...numbers) => numbers.sort();

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。

 

扩展运算符

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

 

 

1.  
   console.log(1, ...[2, 3, 4], 5)
2.  
   // 1 2 3 4 5

扩展运算符提供了复制数组的简便写法。

 

1.  
   const a1 = [1, 2];
2.  
   // 写法一
3.  
   const a2 = [...a1];
4.  
   // 写法二
5.  
   const [...a2] = a1;

扩展运算符提供了数组合并的新写法。

1.  
   // ES5
2.  
   [1, 2].concat(more)
3.  
   // ES6
4.  
   [1, 2, ...more]
5.  
    
6.  
   var arr1 = ['a', 'b'];
7.  
   var arr2 = ['c'];
8.  
   var arr3 = ['d', 'e'];
9.  
    
10.  
    // ES5的合并数组
11.  
    arr1.concat(arr2, arr3);
12.  
    // [ 'a', 'b', 'c', 'd', 'e' ]
13.  
     
14.  
    // ES6的合并数组
15.  
    [...arr1, ...arr2, ...arr3]
16.  
    // [ 'a', 'b', 'c', 'd', 'e' ]

六、箭头函数

ES6 允许使用“箭头”（=>）定义函数。

1.  
   var f = v => v;
2.  
   //上面的箭头函数等同于：
3.  
   var f = function(v) {
4.  
   return v;
5.  
   };

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

1.  
   var f = () => 5;
2.  
   // 等同于
3.  
   var f = function () { return 5 };

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

1.  
   // 报错
2.  
   let getTempItem = id => { id: id, name: "Temp" };
3.  
    
4.  
   // 不报错
5.  
   let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

1.  
   const full = ({ first, last }) => first + ' ' + last;
2.  
   // 等同于
3.  
   function full(person) {
4.  
   return person.first + ' ' + person.last;
5.  
   }

箭头函数的一个用处是简化回调函数。

1.  
   // 正常函数写法
2.  
   [1,2,3].map(function (x) {
3.  
   return x * x;
4.  
   });
5.  
    
6.  
   // 箭头函数写法
7.  
   [1,2,3].map(x => x * x);

箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

1.  
   function foo() {
2.  
   setTimeout(() => {
3.  
   console.log('id:', this.id);
4.  
   }, 100);
5.  
   }
6.  
    
7.  
   var id = 21;
8.  
    
9.  
   foo.call({ id: 42 });

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

七、ES6对象

 

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

1.  
   const foo = 'bar';
2.  
   const baz = {foo};
3.  
   baz // {foo: "bar"}

ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。下面是另一个例子。

 

1.  
   function f(x, y) {
2.  
   return {x, y};
3.  
   }
4.  
    
5.  
   // 等同于
6.  
    
7.  
   function f(x, y) {
8.  
   return {x: x, y: y};
9.  
   }
10.  
     
11.  
    f(1, 2) // Object {x: 1, y: 2}

函数的name属性，返回函数名。对象方法也是函数，因此也有name属性。

 

1.  
   const person = {
2.  
   sayName() {
3.  
   console.log('hello!');
4.  
   },
5.  
   };
6.  
    
7.  
   person.sayName.name // "sayName"

在对象的继承、原型和构造函数上ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

 

1.  
   class Animal {
2.  
   constructor(){
3.  
   this.type = 'animal'
4.  
   }
5.  
   says(say){
6.  
   console.log(this.type + ' says ' + say)
7.  
   }
8.  
   }
9.  
    
10.  
    let animal = new Animal()
11.  
    animal.says('hello') //animal says hello
12.  
     
13.  
    class Cat extends Animal {
14.  
    constructor(){
15.  
    super()
16.  
    this.type = 'cat'
17.  
    }
18.  
    }
19.  
     
20.  
    let cat = new Cat()
21.  
    cat.says('hello') //cat says hello

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。
Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

八、遍历方法

ES6 一共有 5 种方法可以遍历对象的属性。
（1）for...in
for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
（2）Object.keys(obj)
Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
（3）Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。
（4）Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

（5）Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

1. 首先遍历所有数值键，按照数值升序排列。
2. 其次遍历所有字符串键，按照加入时间升序排列。
3. 最后遍历所有 Symbol 键，按照加入时间升序排列。

九、Symbol

 

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

1.  
   let s1 = Symbol('foo');
2.  
   let s2 = Symbol('bar');
3.  
    
4.  
   s1 // Symbol(foo)
5.  
   s2 // Symbol(bar)
6.  
    
7.  
   s1.toString() // "Symbol(foo)"
8.  
   s2.toString() // "Symbol(bar)"

由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或覆盖（Symbol 值作为对象属性名时，不能用点运算符，因为点运算符后面总是字符串，所以不会读取mySymbol作为标识名所指代的那个值，导致a的属性名实际上是一个字符串，而不是一个 Symbol 值）。

1.  
   let mySymbol = Symbol();
2.  
    
3.  
   // 第一种写法
4.  
   let a = {};
5.  
   a[mySymbol] = 'Hello!';
6.  
    
7.  
   // 第二种写法
8.  
   let a = {
9.  
   [mySymbol]: 'Hello!'
10.  
    };
11.  
     
12.  
    // 第三种写法
13.  
    let a = {};
14.  
    Object.defineProperty(a, mySymbol, { value: 'Hello!' });
15.  
     
16.  
    // 以上写法都得到同样结果
17.  
    a[mySymbol] // "Hello!"

Object.getOwnPropertySymbols方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

1.  
   const obj = {};
2.  
   let a = Symbol('a');
3.  
   let b = Symbol('b');
4.  
    
5.  
   obj[a] = 'Hello';
6.  
   obj[b] = 'World';
7.  
    
8.  
   const objectSymbols = Object.getOwnPropertySymbols(obj);
9.  
    
10.  
    objectSymbols
11.  
    // [Symbol(a), Symbol(b)]

Symbol可以用于实现单例模式：

 

1.  
   // mod.js
2.  
   const FOO_KEY = Symbol.for('foo');
3.  
    
4.  
   function A() {
5.  
   this.foo = 'hello';
6.  
   }
7.  
    
8.  
   if (!global[FOO_KEY]) {
9.  
   global[FOO_KEY] = new A();
10.  
    }
11.  
     
12.  
    module.exports = global[FOO_KEY];

上面代码中，可以保证global[FOO_KEY]不会被无意间覆盖，但还是可以被改写。

十、Set和Map

 

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。

 

1.  
   const s = new Set();
2.  
    
3.  
   [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
4.  
    
5.  
   for (let i of s) {
6.  
   console.log(i);
7.  
   }
8.  
   // 2 3 5 4

Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

 

1.  
   // 例一
2.  
   const set = new Set([1, 2, 3, 4, 4]);
3.  
   [...set]
4.  
   // [1, 2, 3, 4]
5.  
    
6.  
   // 例二
7.  
   const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
8.  
   items.size // 5

Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。
keys方法、values方法、entries方法返回的都是遍历器对象，由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

1.  
   const map = new Map([
2.  
   ['name', '张三'],
3.  
   ['title', 'Author']
4.  
   ]);
5.  
    
6.  
   map.size // 2
7.  
   map.has('name') // true
8.  
   map.get('name') // "张三"
9.  
   map.has('title') // true
10.  
    map.get('title') // "Author"

与其他数据结构的互相转换

（1）Map 转为数组
前面已经提过，Map 转为数组最方便的方法，就是使用扩展运算符（...）。

1.  
   const myMap = new Map()
2.  
   .set(true, 7)
3.  
   .set({foo: 3}, ['abc']);
4.  
   [...myMap]
5.  
   // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

（2）数组 转为 Map
将数组传入 Map 构造函数，就可以转为 Map。

1.  
   new Map([
2.  
   [true, 7],
3.  
   [{foo: 3}, ['abc']]
4.  
   ])
5.  
   // Map {
6.  
   // true => 7,
7.  
   // Object {foo: 3} => ['abc']
8.  
   // }

（3）Map 转为对象
如果所有 Map 的键都是字符串，它可以转为对象。

1.  
   function strMapToObj(strMap) {
2.  
   let obj = Object.create(null);
3.  
   for (let [k,v] of strMap) {
4.  
   obj[k] = v;
5.  
   }
6.  
   return obj;
7.  
   }
8.  
    
9.  
   const myMap = new Map()
10.  
    .set('yes', true)
11.  
    .set('no', false);
12.  
    strMapToObj(myMap)
13.  
    // { yes: true, no: false }

（4）对象转为 Map

 

1.  
   function objToStrMap(obj) {
2.  
   let strMap = new Map();
3.  
   for (let k of Object.keys(obj)) {
4.  
   strMap.set(k, obj[k]);
5.  
   }
6.  
   return strMap;
7.  
   }
8.  
    
9.  
   objToStrMap({yes: true, no: false})
10.  
    // Map {"yes" => true, "no" => false}

（5）Map 转为 JSON
Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

1.  
   function strMapToJson(strMap) {
2.  
   return JSON.stringify(strMapToObj(strMap));
3.  
   }
4.  
    
5.  
   let myMap = new Map().set('yes', true).set('no', false);
6.  
   strMapToJson(myMap)
7.  
   // '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

1.  
   function mapToArrayJson(map) {
2.  
   return JSON.stringify([...map]);
3.  
   }
4.  
    
5.  
   let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
6.  
   mapToArrayJson(myMap)
7.  
   // '[[true,7],[{"foo":3},["abc"]]]'

（6）JSON 转为 Map
JSON 转为 Map，正常情况下，所有键名都是字符串。

1.  
   function jsonToStrMap(jsonStr) {
2.  
   return objToStrMap(JSON.parse(jsonStr));
3.  
   }
4.  
    
5.  
   jsonToStrMap('{"yes": true, "no": false}')
6.  
   // Map {'yes' => true, 'no' => false}

十一、模块（module）体系

 

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

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

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。
由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。
除了静态加载带来的各种好处，ES6 模块还有以下好处。

1. 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
2. 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。
3. 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。严格模式主要有以下限制。

• 变量必须声明后再使用
• 函数的参数不能有同名属性，否则报错
• 不能使用with语句
• 不能对只读属性赋值，否则报错
• 不能使用前缀 0 表示八进制数，否则报错
• 不能删除不可删除的属性，否则报错
• 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
• eval不会在它的外层作用域引入变量
• eval和arguments不能被重新赋值
• arguments不会自动反映函数参数的变化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局对象
• 不能使用fn.caller和fn.arguments获取函数调用的堆栈
• 增加了保留字（比如protected、static和interface）

export 命令

 

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。

1.  
   // profile.js
2.  
   export var firstName = 'Michael';
3.  
   export var lastName = 'Jackson';
4.  
   export var year = 1958;

上面代码是profile.js文件，保存了用户信息。ES6 将其视为一个模块，里面用export命令对外部输出了三个变量。export的写法，除了像上面这样，还有另外一种。

 

1.  
   // profile.js
2.  
   var firstName = 'Michael';
3.  
   var lastName = 'Jackson';
4.  
   var year = 1958;
5.  
    
6.  
   export {firstName, lastName, year};

export命令除了输出变量，还可以输出函数或类（class）。通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

1.  
   function v1() { ... }
2.  
   function v2() { ... }
3.  
    
4.  
   export {
5.  
   v1 as streamV1,
6.  
   v2 as streamV2,
7.  
   v2 as streamLatestVersion
8.  
   };

export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

1.  
   // 报错
2.  
   var m = 1;
3.  
   export m;
4.  
    
5.  
   // 写法一
6.  
   export var m = 1;
7.  
    
8.  
   // 写法二
9.  
   var m = 1;
10.  
    export {m};

import 命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

1.  
   // main.js
2.  
   import {firstName, lastName, year} from './profile.js';
3.  
    
4.  
   function setName(element) {
5.  
   element.textContent = firstName + ' ' + lastName;
6.  
   }

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surname } from './profile.js';

import命令具有提升效果，会提升到整个模块的头部，首先执行。

export default 命令

 

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

 

1.  
   // export-default.js
2.  
   export default function () {
3.  
   console.log('foo');
4.  
   }

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

 

1.  
   // import-default.js
2.  
   import customName from './export-default';
3.  
   customName(); // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

export 与 import 的复合写法

 

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

1.  
   export { foo, bar } from 'my_module';
2.  
    
3.  
   // 等同于
4.  
   import { foo, bar } from 'my_module';
5.  
   export { foo, bar };

import和require的区别

引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。
这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。

1.  
   const path = './' + fileName;
2.  
   const myModual = require(path);

上面的语句就是动态加载，require到底加载哪一个模块，只有运行时才知道。import语句做不到这一点。

import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

1.  
   import('./myModule.js')
2.  
   .then(({export1, export2}) => {
3.  
   // ...·
4.  
   });

上面代码中，export1和export2都是myModule.js的输出接口，可以解构获得。如果模块有default输出接口，可以用参数直接获得。

如上就是ES6中比较容易识别出的关键点，实际上在两天半的ES6使用中也确实见到了如上的用法，感谢阮一峰老师的博客，先总结到这里，留待后补?