export和export default的区别

在es5中,用module.exports和exports导出模块,用require引入模块。
es6新增export和export default导出模块,import导入模块。

在es6中的两种基本用法

新建两个文件:a.js, b.js。a.js用于导出模块,b.js用户导入模块。两个文件放在同一目录下。

  • export default导出:
//a.js
const Programmer = {name: 'UncleFirefly',age:25}
export default Programmer

export default导出对应的导入:

//b.js
import Programmer from './a.js'
  • export导出:
//a.js
const uncle = {name: 'UncleFirefly',age:25}
const aunt = {name: 'AuntFirefly',age:25}
export {uncle, aunt}

export 导出对应的导入:

//b.js
import {uncle, aunt} from './a.js'

区别

  • export和export default的区别
//a.js
const Programmer = {name: 'UncleFirefly',age:25}
export default Programmer
console.log(module)
/*
//打印结果
{exports: {default:{age:25,name:'UncleFirefly'}, hot:{...}}
*/
//a.js
const uncle = {name: 'UncleFirefly',age:25}
const aunt = {name: 'AuntFirefly',age:25}
export {uncle, aunt}
/*
//打印结果
{exports: {aunt:{age:25,name:'AuntFirefly'},uncle:{age:25,name:'UncleFirefly'}, hot:{...}}
*/
  • 导出时
    export相当于把对象添加到module的exports中。
    export default相当于把对象添加到module的exports中,并且对象的key叫default。
  • 导入时:
    不带{}的导入
    本质上就是导入exports中的default属性(注:如果default属性不存在,则导入exports对象)。

带{}的导入
本质上按照属性key值导入exports中对应的属性值。

https://www.jianshu.com/p/f6c5a646c00b

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值