export default 和 export 区别

本文详细解析了JavaScript中export与export default的区别及使用方法,包括如何导出和导入常量、函数、文件、模块等内容,并附有示例代码。

export default 和 export 区别:

1.export与export default均可用于导出常量、函数、文件、模块等
2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3.在一个文件或模块中,export、import可以有多个,export default仅有一个
4.通过export方式导出,在导入时要加{ },export default则不需要

1.export
//demo1.js
export const str = 'hello world'
export function f(a){ return a+1}
对应的导入方式:

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次,导入的时候带花括号

2.export default
//demo1.js
export default const str = 'hello world'
对应的导入方式:

//demo2.js
import str from 'demo1' //导入的时候没有花括号

使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名

//a.js
let sex = "boy";
export default sex(sex不能加大括号)
//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。
// b.js
本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12)   // boy,boy


作者:谢一咕
链接:http://www.jianshu.com/p/edaf43e9384f
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
<think>好的,我现在需要回答用户关于JavaScript中export defaultexport区别的问题。首先,我得回忆一下自己对这两个关键字的理解,可能还需要查阅一些资料确保准确性。 记得在ES6模块系统中,exportexport default都用于导出模块,但用法不同。用户提供的引用资料里提到,export default适合导出默认值,而export用于导出多个命名成员。比如,使用export的时候,导入需要用大括号指定名称,而export default不需要。例如,引用[1]提到,export default导出的模块在导入时可以自定义名称,而export导出的必须使用原名或者通过as重命名。 接下来,要区分两者的使用场景。根据引用[2],export default适用于模块只有一个主要导出的情况,比如Vue中的组件文件通常用export default。而export适合导出多个函数、变量等,比如工具模块可能有多个工具函数需要导出。例如,引用[3]提到,在Vue中,export default导出的是正常对象,而export导出的是模块对象,这可能影响在组件中的使用方式。 然后需要考虑语法差异。export default后面可以直接跟值或变量,而export需要在声明前加关键字,或者使用{}导出多个。例如,使用export const a = 1;然后导入时用import {a} from 'module'。而export default的话,可以直接导出一个函数,导入时不用大括号。 另外,混合使用的情况,比如一个模块同时有默认导出命名导出,这时候导入时需要分别处理。例如,import Default, { Named } from 'module',这里Default是默认导出,Named是命名导出。 最后,总结两者的区别使用场景,确保回答结构清晰,符合用户的要求。同时需要生成相关问题,可能涉及性能优化、应用实例或者与其他模块系统的比较等。</think>### JavaScript中export defaultexport区别 #### 1. **基本定义** - **export default**:用于导出模块的**默认成员**,一个模块只能有一个默认导出。导入时可以使用任意名称接收默认导出的值。 ```javascript // 导出 const message = "Hello"; export default message; // 导入 import customName from './module'; // 可自定义名称 ``` - **export**:用于导出**命名成员**,一个模块可包含多个命名导出。导入时必须使用与导出时相同的名称(或通过`as`重命名)[^1]。 ```javascript // 导出 export const a = 1; export function add(x, y) { return x + y; } // 导入 import { a, add } from './module'; // 必须使用导出时的名称 ``` --- #### 2. **语法差异** - **export default** 的语法更灵活: - 可直接导出匿名函数、类或字面量。 - 导出时无需显式声明变量。 ```javascript export default function() { /* ... */ } // 匿名函数导出 ``` - **export** 需严格绑定名称: - 必须在声明时添加`export`关键字,或在导出时用`{}`包裹名称。 ```javascript export const name = "Alice"; // 声明时导出 // 或 const age = 30; export { age }; // 后置导出 ``` --- #### 3. **使用场景** | **export default** | **export** | |-----------------------------------|--------------------------------| | 适用于模块的**单一主要功能**(如Vue组件、主类) | 适用于导出**多个工具函数**或配置项 | | 导入时名称自由定义,降低耦合度 | 需要精确按名称导入,适合明确依赖关系 | | 示例:Vue单文件组件的默认导出[^3] | 示例:工具类模块导出多个函数 | --- #### 4. **混合使用** 一个模块可同时包含默认导出命名导出: ```javascript // 导出 export default class User { /* ... */ } export const API_URL = "https://api.example.com"; // 导入 import User, { API_URL } from './module'; ``` --- #### 5. **注意事项** - **命名冲突**:使用`as`关键字解决导入时的名称冲突。 ```javascript import { add as sum } from './math'; ``` - **整体导入**:通过`* as`语法导入所有命名导出。 ```javascript import * as utils from './utils'; utils.add(2, 3); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值