JavaScript中export与export default的区别详解

前言

前端开发中，模块化是核心思想之一，也是开发者必须掌握且面试常考的内容。ES6引入模块化，旨在编译阶段确定依赖及输入输出变量，涵盖导出与导入机制。本文聚焦于导出环节，详细解析export与export default的差异，导入部分将另文探讨，以此记录以备查阅。

export

1、基本用法

模块借助export输出字符串、数值、函数及类等变量，具体用法如下：

通过export导出的函数与类声明必须包含名称（export default情形除外）。

既支持导出声明，也支持导出引用（例如函数）。

export命令可置于模块任意位置，但必须位于模块顶层。

注意：使用export导出时，建议在文档末尾使用大括号明确指定输出的一组变量，以清晰界定导出接口；函数和类均需具备对应名称，此举可避免导出文档尾部出现无名称的情况。

2、as用法

使用export导出接口名称时，需与模块内部变量保持一一对应；导入的变量名须与导出的接口名一致，但顺序无需相同。

当不同模块导出的接口名称发生冲突时，需利用as重新定义变量名，此操作相当于执行“等价转换”。

3、复合使用

实际应用中，export与import可在同一模块内复合使用，其特点如下：

允许对导出的接口进行重命名，涵盖default情况。

复合使用export与import时，亦可导出全部内容，此时当前模块导出的接口将覆盖所继承导出的接口。

4、使用示例

示例一：

/*-----export [dome.js]-----*/
 
let name = "Jack";
let age =30;
let fun = function(){ return "My name is" + name + "! I'm '" + age + "years old." }
let mClass = class mClass { static aaa = "Hello!"; }
export { name, age, fun, mClass }

示例二：

/*-----export [demo1.js]-----*/
let name = "Jack";
export { name as exportName }
 
 
/*-----export [demo2.js]-----*/
let name2 = "Jack";
export { name2 }
 
 
/*-----export [demo3.js]-----*/
let name3 = "Jack";
export { name3 }

示例三：

export { foo, bar } from "methods"; // 大约等同于约下面两段语句，不过上面导入导出方式的该模块没有导入 foo 与 bar
 
 
import { foo, bar } from "methods";
export { foo, bar };
export { foo as bar } from "methods";  // 普通情况下的改名
export { foo as default } from "methods";  // 把 foo 转导成 default
export { default as foo } from "methods";  // 把 default 转导成 foo
export * from "methods"; // *号类型

export default

1、基本用法

在单一文件或模块中，export default仅允许存在一个导出，具体用法如下：

• export default中的default即指代对应的导出接口变量。
• 模块通过export default进行导出时，导入操作无需使用{ }。
• 利用export default向外暴露成员时，可任意指定变量进行接收。

2、使用示例

var a = "My name is Jack!";
export default a; // 仅有一个导出
 
 
export default var c = "error";  // error，default 已经是对应的导出变量，不能跟着变量声明语句
import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收

区别

1、相同部分

1⃣️export与export default均通过import进行导入；

2⃣️export与export default均用于导出，涵盖常量、函数、文件及模块等。

2、不同部分

1⃣️在单一文件或模块中，export允许存在多个导出，而export default仅允许一个导出。即输出单个变量时使用export default，输出多个变量时使用export；

2⃣️模块通过export方式导出时，导入需添加{ }；而通过export default导出时，导入则无需添加；

3⃣️使用export default指定默认导出时，导入仅需获取文件名；使用export导出时，必须知晓导出的函数或变量等，且导入时的变量名须与导出时的名称保持一致。

拓展：import导入

1、基本用法

具体用法如下：

• 模块通过import导入各类变量，包括字符串、数值、函数及类。
• import命令会提升至模块头部优先执行。

2、特点

只读属性：禁止在加载模块的脚本中改写接口的引用指向，即允许改写import变量类型为对象的属性值，但不允许改写基本类型的值。

单例模式：重复执行同一句import语句仅执行一次，不会多次执行。对同一模块声明不同接口引用会创建对应变量，但import仅执行一次。

静态执行特性：import属于静态执行，因此不能使用表达式和变量。

3、使用示例

示例一：

import {a} from "./aaa.js"
 
a.foo = "hello";  // a = { foo : 'hello' }

示例二：

import { a, b } from "./xxx.js";  //导入多个变量的写法

最后

综上所述，前端开发中export与export default的区别是实际开发中的必备技能，尤其对初中级开发者而言至关重要。如需了解更多javascript export和export default内容，请搜索本站往期文章或继续浏览下方相关文章，期待大家今后多多支持本站！