<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="export-1.js" type="module"></script>
</body>
export {a as default} from './export-3.js';
//export-1.js
import a from './export-2.js'
console.log(a)
//export-2.js
export {a as default} from './export-3.js';
//等同于
export {a} from './export-3.js';
export default a
//export-3.js
let a = 2
export {a}
export {default as b} from './export-3.js';
//export-1.js
import {b} from './export-2.js'
console.log(b)
//export-2.js
export {default as b} from './export-3.js';
//export-3.js
let a = 2
export default a
import b from './export-3.js'
//export-1.js
import b from './export-2.js'
console.log(b)
//export-2.js
import b from './export-3.js'
export default b
//export-3.js
let a = 2
export default a
//export-1.js
import cc from './export-2.js'
let {b}=cc
console.log(b)
//export-2.js
import b from './export-3.js'
const cc = {b}
export default cc
//export-3.js
let a = 2
export default a
import上的{} 是去取export的值;没有{}则是取export default;不能理解成简单的对象解构
ES6 export && export default 差异总结
-
export default 在一个模块里只能有一个,但是export可以有多个
-
模块中通过export 导出的(属性或者方法)可以修改,但是通过export default导出的不可以修改
-
如果想修改默认导出的值,可以使用export {e1 as default}这种方法。
- export 与 import 的复合写法
网友评论