export与export default的区别

最新推荐文章于 2025-04-16 10:13:18 发布

前端小li

最新推荐文章于 2025-04-16 10:13:18 发布

阅读量304

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/HTML5_student/article/details/120041035

版权

前端专栏收录该内容

32 篇文章

订阅专栏

本文详细讲解了export与exportdefault在JavaScript中的不同用途，包括它们在导出常量、函数、模块时的区别，导入方式的差异，以及exportdefault的独有特性。重点阐述了如何合理使用exportdefault避免命名冲突，并给出了实际示例和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export与export default均可用于导出常量、函数、文件、模块等
在一个文件或模块中，export、import可以有多个，export default仅有一个
通过export方式导出，在导入时要加{ }，export default则不需要
输出单个值，使用export default
输出多个值，使用export
export default与普通的export不要同时使用

事例

1.export

//one.js
export const data= "export测试";
export function init(value) { 
  return value;
}
对应的导入方式： 
//two.js
import { data, init} from 'one'; //也可以分开写两次，导入的时候带花括号

2.export default

//one.js
const data= "exportdefault测试";
export default data;
对应的导入方式： 
//two.js
import data from 'one'; //导入的时候没有花括号

其实export default data;相当于data为变量值"exportdefault测试"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。

a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含