区别

相同与差异

都可用来导出常量、函数、模块等
在一个模块中 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的语法
导致演示失败