ES6的 import 和 export 用法总结

 es6中把 import 和 export 的内容都当成模块看待。export 通常有以下 3种 写法。

第1种：export 显式声明的变量

1.同一文件中，可写多次 export

2.导出的变量 必须是显式声明的

例如 export {a: 1} 或 export [1, 2, 3] 都是语法错误的，这种写法 其实是导出 某个值，往下会说明。

//lib.js
export const num = 1;
export const arr = [ 1, 2, 3 ];
export const obj = { a: 1 };

//xxx.js
import {num, arr, obj} from './lib';

第2种 ：export 汇总变量

1.同一文件中，可写多次 export

2.导出的变量 不一定 是显式声明的

注意：与第1种效果其实是一样的，主要用于 汇总导出多个子文件的场景

场景一
//lib.js
const num = 1;
const arr = [ 1, 2, 3 ];
const obj = { a: 1 };

export {num, arr, obj};
export str = 'hello';

//xxx.js
import {num, arr, obj, str as newStr} from './lib'; //还可使用 as关键字 定义别名

console.log(newStr); //输出 'hello'
console.log(str); //报错，str未定义，因为已改为 newStr

场景二（常用）
//lib.js
import Button1 from './Button1';
import Button2 from './Button2';
import Button3 from './Button3';

export { Button1, Button2 }; //正确
export Button3; //错误，编译器会认为 Button3 未声明

//xxx.js
import {Button1, Button2} from './lib';

第3种：export default 值 

1.同一文件中，export default xxx 只能写一次

2.导出的是某个值，而不是变量

//lib-1.js
export const arr = [1, 2, 3];
export default { a: 1, b: 2 };

//lib-2.js
export default 'hello';

//xxx.js
import obj, {arr} from './lib-1';
import str from './lib-2';

console.log(obj); //输出 {a: 1, b: 2}
console.log(arr); //输出 [1, 2, 3]
console.log(str); //输出 'hello'

注意：
由于导出的是 某个值，所以import时 必须用 变量名 去接。
而只有当导出的是 显式变量名 时，import才能用 解构赋值 的写法。

最后注意一点，关于 导出 你肯定还见过 module.exports 和 exports，这是 Node.js 的语法，不是 ES6 的，千万别搞混了。