区别
相同与差异
都可用来导出常量、函数、模块等
在一个模块中 export、import可以多次使用
export方式导出, 需要用{}
export default 则不需要
导入模块时, 同理
在同一个模块中只能用一次 export default
案例演示
准备4个文件, 都在同一个目录下
1
2
3
4
|
es01.js
mod01.js
mod02.js
testes6.html
|
两个模块
mod01.js
1
2
|
let aa = {name:"mod01-aa"}
export {aa}
|
mod02.js
1
2
3
4
5
|
let bb = {name: "mod02-bb"}
let cc = {name: "mod02-cc"}
let dd = {name: "mod02-dd"}
export {bb, cc}
export default dd
|
使用
es01.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import {aa} from "./mod01.js"
import {bb, cc as mc} from "./mod02.js"
import dddd from "./mod02.js"
// import dddd, {bb, cc as mc} from "./mod02.js"
function sayHello() {
console.log(111)
console.log(JSON.stringify(aa))
console.log(JSON.stringify(bb))
console.log(JSON.stringify(mc))
console.log(JSON.stringify(dddd))
console.log(222)
}
sayHello()
|
testes6.html
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-es6-export</title>
</head>
<body>
<h1>test-es6-export</h1>
<script type="module" src="/sc/es01.js"></script>
</body>
</html>
|
效果
浏览器打开页面后 控制台的输出
1
2
3
4
5
6
|
111
{"name":"mod01-aa"}
{"name":"mod02-bb"}
{"name":"mod02-cc"}
{"name":"mod02-dd"}
222
|
如果浏览器版本过老,可能会不支持es6的语法
导致演示失败