2021-07-12 关于ES6中的export和export default

它们是干什么的

在ES6中，export和export default均可用于导出变量、函数、文件、模块等，我们可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块)名 的方式，将其导入，以便能够对其进行使用。不过，一个js文件中可以有多个export，但只有一个export default，二者可以同时使用。

export的使用

首先定义一个test.js文件，并导出如下函数

//1. 这是test.js文件

//2. 使用export导出如下函数
export function func1(){
	console.log("我是函数1")
}
export function func2(){
	console.log("我是函数2")
}
export let count = 2

然后定义一个index.js文件，导入test.js中的函数

部分导入

//这是index.js文件

import {func1} from './test.js' //导入test.js文件中的func1方法
func1() //执行test.js中的func1方法 输出为 我是函数1

需要注意的是，{func1}中的func1必须与test.js中的导出函数名保持一致

全部导入

//1. 这是index.js文件

//2. 通过设置别名全部导入
import * as funcs from './test.js' //funcs是取的别名
funcs.func1()//我是函数1
funcs.func2()//我是函数2
console.log(funcs.count)//2

//3. 也可通过设置单个别名导入
import {func1 as f1,func2,count} from './test.js'
f1() //我是函数1
func2() //我是函数2
console.log(count) //2

export default的使用

前面已经提到，export default与export可以在同一个js文件中同时使用，所以，我们直接在前面定义的test.js文件中添加如下代码

//1. 这是test.js文件

//2. 定义export default导出
export default {
	func4:function(){
		console.log("我是函数4")
	}
	func5:function(){
		console.log("我是函数5")
	}
	myname:'我是export default'
}

接下来，我们将要在index.js文件中导入test.js文件中export default导出的方法及变量

//1. 这是index.js文件

//2. 导入
import newFuncs from './test.js' //newFuncs是任意取的变量名，可以任取
newFuncs.func4() //我是函数4
newFuncs.func5() //我是函数5
console.log(newFuncs.myname) //我是export default

export和export default暴露出的方法及变量等还可以同时导入

//1. 这是index.js文件

//2. 同时导入
import newFuncs,{func1 as f1,func2,count} from './test.js'
newFuncs.func5() //我是函数5
f1() //我是函数1
console.log(newFuncs.myname) //我是export default
console.log(count) //2

export和export default的区别

1. 一个js文件可以有多个export，但只能有一个export default
2. 当使用export导出时，导入必须使用{}，而export default不用
3. 使用export导出时，导入必须知道export暴露出的函数名及变量名等，而export default是默认导出，导入时只需要知道文件名即可

一些注意事项

在学习export default时，看到有这样一种写法

export default const str = 'hello world'

这种写法是错误的，正确的写法应该是

//1. 使用export导出
export const str = "hello world"

//2. 使用export default导出
const str = "hello world"
export default str

export default str的含义是将str的值赋给default，所以export const str = "hello world"的写法是错误的。具体说明可以参照ES6说明文档

好啦 关于export与export default的学习就到这里，如果文章内容有问题，欢迎指正！