export和export default的区别

发布时间 2023-11-28 14:14:39作者: upupupupupgo

export 和export default都是对外暴露成员,但是二者区别是:export default 则是在 export的基础上,为规定模块提供一个默认的对外接口。

1. export

1. 输出方式

  • 使用export向外暴露的成员,只能使用{}来包裹,这种形式,叫作【按需导出】
  • export可以向外暴露多个成员
// 直接输出
export let str = `hello world!!!`
export function fuc () {}
// 先定义在输出
let str1 = 'hello'
let str2 = 'world'
let str3 = '!!!'
function func(){}
export {str1, str2, str3, fuc}

2. 输入方式

  • 当export向外暴露了多个成员,但是某些成员,在import导入时,不需要,可以不在{}中定义
  • 使用export导出的成员,在导入时必须严格按照导出时候的名称,来使用{}【按需接收】
  • 使用export导出的成员,在导入时如果想换个变量名称接受,可以使用as来起别名
import {str1, str2 as str2s} form 'xxx.js'
console.log(str1+'======'+str2s) // hello======world

export default

1. 输出方式

  • 在一个模块中,export default只允许想我暴露一次
  • 在一个模块中,可以同时使用export default 和export向外暴露成员
// xxx.js
const obj = {
  name: '小红,
  age: 20
}
export default obj

2. 输入方式

  • export default向外暴露的成员,可以使用任意变量来接收
import user from 'xxx.js'
console.log(user)