一、概述

ES6中，在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等。

• export、export default 负责 导出，import则负责导入。
• export 在一个js文件中可以有多个，export default 最多只能有一个。
• export 可以和export default 混用
• 通过export方式导出，在导入时要加{ }，export default则不需要，并可以起任意名称

二、export

2.1. 方式一：先声明后导出

// test1.js
const a1 = "a1";
function fn1() {
  console.log("我是fn1");
}
export { a1, fn1 };

2.2. 方式二：导出与声明一起

// test2.js
export const a2 = "a2";
export function fn2() {
  console.log("我是fn2");
}

2.3. 方式一二：混用

// test3.js
const a3 = "a3";
export { a3 };
export function fn3() {
  console.log("我是fn3");
}

2.4. 导出之前别名

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

const str = "export的内容";
const year = 2019;
function message(sth) {
  return sth;
}
export { str as newname1, year as newname2, message as newname3 };

上面代码使用as关键字，重命名了变量str和year，以及函数message的对外接口。

2.5. export导出注意事项

export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

错误示例

// 报错
export 1;

// 报错
var m = 1;
export m; //输出的还是1，是个值不是接口
// 没有提供对外的接口。

正确写法

// 写法一
export var m = 1;

// 写法二
var m = 1;
export { m };

// 写法三
var n = 1;
export { n as m };

2.6. import引入export的导出

用哪个取哪个，还可以as关键词别名

import { a1, fn1 } from "./test1.js";
import { a2 as ha, fn2 } from "./test2.js";
import { a3, fn3 } from "./test3.js";

全部取出，对象方式使用

import * as test1 from './test1.js'
import * as test3 from './test3.js'
test1.fn1()
test3.fn3()
console.log(test3.a3)

三、export default

export default命令用于模块的默认输出，一个模块只能有一个默认输出，export default 只能使用一次，所以import命令可以不用加花括号，因为只能唯一对应export default 命令

3.1. 先声明后导出

// test4.js
function fn4() {
    console.log('我是fn4');
}
export default fn4

3.2. 导出与声明一起

// test5.js
export default function fn5() {
    console.log('我是fn5');
}

// 也可以导出一个匿名函数
export default function() {
    console.log('我是fn5');
}

• 方式2export default导出的 fn5 可以是匿名函数，而 export 必须是一个命名函数。
• 为什么这里可以是匿名呢？
• 原来 export default 导出的函数在 import 导出的时候都会重新命名，具体意思看下面的示例。

3.3. import引入export default 的导出

export default 只有一种引入方式

import test5 from './test5.js'
test5()

这个 test5 就是我们给 export default function fn5() 或者 export default function() 重新定义的名字。

export default 导出的变量不能使用const | let | var声明，多值则需要以对象的形式导出

const a6='a6'   //  let,var
export default {
    a6,
    fn6(){ 
       console.log('我是fn6'); 
    }
}

引入还是跟使用 test5.js 一样的

import moreEle from './test6.js'
console.log(moreEle.a6)
moreEle.fn6()

四、export * from ‘module’

4.1. 基本介绍

• 这是ES6中一种导出方式的语法，可以将一个模块中所有的接口，都转移到当前模块的命名空间中并导出。
• 可以理解为把模块中的所有export语句（不包含export default ），自动转发到当前模块的export语句中去并导出。
• export * from 不能包含export default 导出

例如，如果有一个模块叫做a.js，里面export了若干个模块成员。现在，我们有一个b.js模块，想把它的所有成员都输入到当前模块并导出。可以使用如下的语句：

// b.js
export function f() {}
export function g() {}
// a.js
export * from './b.js' // 把 './b.js' 里面的所有东西导入到当前模块并导出

4.2. 使用export * 相互循环导入会报错

使用export * from 'module'语法时，可能会出现模块之间相互循环导入的情况，这种情况下会直接报错。

因为export * 导出的是一个对象，而对象的属性和方法都是指向原有模块的，因此出现循环导入时，会导致模块的属性和方法无限循环下去，最终造成系统崩溃，因此在使用export * 导入时，必须避免出现循环导入的情况。

// a.js
export * from './b.js' // 报错：无限循环
// b.js
export * from './a.js'

五、export { xxx as default }

• export default xxx就是export { xxx as default }的语法糖
• import xxx from 'modules'; 就是 import { default as xxx } from "modules"的语法糖

// modules.js
function add(x, y) {
  return x * y;
}
export { add as default };
// 等同于
// export default add;

// app.js
import { default as foo } from "modules";
// 等同于
// import foo from 'modules';

六、import 同时引入export和export default导出的变量或方法

const a1 = 'a1' //var 、let
function fn1() {
    console.log('我是fn1');
}
export { a1, fn1 }

export default function fn2() {
    console.log('我是fn5');
}

import fn2, { a1, fn1 } from "module";