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'
3. while (true) {
4. var name = 'obama'
5. console.log(name) //obama
6. break
7. }
9. console.log(name) //obama

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

1. let name = 'zach'
3. while (true) {
4. let name = 'obama'
5. console.log(name) //obama
6. break
7. }
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
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
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
4. let [x = 1] = [null];
5. x // null

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

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

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

1. function m1({x = 0, y = 0} = {}) {
2. return [x, y];
3. }
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]
5. // x 和 y 都无值的情况
6. m1({}) // [0, 0];
7. m2({}) // [undefined, undefined]
9. m1({z: 3}) // [0, 0]
10. m2({z: 3}) // [undefined, undefined]

四、模板字符串

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

1. // 普通字符串
2. `In JavaScript '\n' is a line-feed.`
4. // 多行字符串
5. `In JavaScript this is
6. not legal.`
8. console.log(`string text line 1
9. string text line 2`);
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;
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. }
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]
6. var arr1 = ['a', 'b'];
7. var arr2 = ['c'];
8. var arr3 = ['d', 'e'];
10. // ES5的合并数组
11. arr1.concat(arr2, arr3);
12. // [ 'a', 'b', 'c', 'd', 'e' ]
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" };
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. });
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. }
7. var id = 21;
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. }
5. // 等同于
7. function f(x, y) {
8. return {x: x, y: y};
9. }
11. f(1, 2) // Object {x: 1, y: 2}

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

1. const person = {
2. sayName() {
3. console.log('hello!');
4. },
5. };
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. }
10. let animal = new Animal()
11. animal.says('hello') //animal says hello
13. class Cat extends Animal {
14. constructor(){
15. super()
16. this.type = 'cat'
17. }
18. }
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');
4. s1 // Symbol(foo)
5. s2 // Symbol(bar)
7. s1.toString() // "Symbol(foo)"
8. s2.toString() // "Symbol(bar)"

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

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

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

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

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

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

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

十、Set和Map

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

1. const s = new Set();
3. [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
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]
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. ]);
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. }
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. }
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. }
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. }
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. }
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;
6. export {firstName, lastName, year};

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

1. function v1() { ... }
2. function v2() { ... }
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;
5. // 写法一
6. export var m = 1;
8. // 写法二
9. var m = 1;
10. export {m};

import 命令

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

1. // main.js
2. import {firstName, lastName, year} from './profile.js';
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';
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输出接口，可以用参数直接获得。