export 和 export default 都是对外暴露成员,但是二者区别是:“export default 则是在 export 的基础上,为规定模块提供一个默认的对外接口”。
export
1、输出方式
- 使用export向外暴露的成员,只能使用
{ }
来包裹,这种形式,叫做【按需导出】 - export可以向外暴露多个成员
// 直接输出
export let str = 'hello world!!!'
export function fuc() {
// ...
}
// 先定义在输出
let str1 = 'hello'
let str2 = 'world'
let str3 = '!!!'
function fuc() {
// ...
}
export {str1, str2, str3, fuc}
2、输入方式
- 当export向外暴露了多个成员,但是某些成员,在import导入时,不需要,可以不在
{ }
中定义 - 使用export导出的成员,在导入时必须严格按照导出时候的名称,来使用
{ }
【按需接收】 - 使用export导出的成员,在导入时如果想换个变量名称接收,可以使用
as
来起别名
import {str1, str2 as str2s} from 'xxx.js'
console.log(str1 + '=======' + str2s); // hello======= world
export default
1、输出方式
- 在一个模块中,export default 只允许向外暴露一次
- 在一个模块中,可以同时使用export default 和export 向外暴露成员
const obj = {
name: '小红',
age: 20
}
export default obj
2、输入方式
- export default 向外暴露的成员,可以使用任意变量来接收
import user from 'xxx.js'
console.log(user);