[ES6]import 与export的用法 ，export 与export default 的 区别 以及用法

Posted 2020-12-31 vickylinj

一、import 与export

export（导出）：用于对外输出本模块（一个文件可以理解为一个模块）变量的接口；

import（导入）：用于在一个模块中加载另一个含有export接口的模块。

 

1.一个a.js文件有如下代码：

a.导出单个变量：

export var name="李四";

b.导出多个变量：

var name1="李四";
var name2="张三";
export { name1 ,name2 }

c.导出函数：

function add(x,y){
   alert(x*y)
}
export { add }

 

 

2.在其它文件里引用如下：

a.导入单个变量：

import { name } from "/.a.js"

b.导入多个变量：

import { name1 , name2 } from "/.a.js"

c.导入函数：

import { add } from "/.a.js"

 

二、export与export default的区别

1.在一个文件或模块中，export、import可以有多个，export default仅有一个，即：

 

var name1="李四";
var name2="张三";
export { name1 ,name2 }

也可写作：

var name1="李四";
var name2="张三";
export name1;
export name2;

 

2.通过export方式导出，在导入时要加{ }，export default则不需要

var name="李四";
export { name };
import { name } from "/.a.js";

用export default可以写作：

var name="李四";
export default name;
import name from "/.a.js"; //这里name不需要大括号