export default {} 和 export {} 的区别

 

在JavaScript ES6模块系统中，export default {} 和 export {} 有明显的区别：

 

1. export default {}：

这个语法用于导出一个默认的模块成员，它可以是一个对象、函数、类等。
当导入时，可以使用任何名称来引用这个默认导出的成员，或者不指定名称直接导入。
每个模块只能有一个 export default，并且它不需要与被导出的变量名相同。
示例：

// 导出文件 (export.js)
const myDefaultObject = { key: 'value' };
export default myDefaultObject;

// 导入文件 (import.js)
import MyImportedObject from './export.js'; // 可以任意命名
console.log(MyImportedObject.key); // 输出 "value"

 

2. export {}：

这是命名导出（Named Exports），用于导出多个具有明确标识符的对象、函数或类。
在导出时，你需要为每个导出项提供一个具体的名称。
导入时需要按照导出时声明的名称来引入。
示例：

// 导出文件 (export.js)
const myVariable = 'hello';
function myFunction() {}
class MyClass {}

export { myVariable, myFunction, MyClass };

 

// 导入文件 (import.js)
import { myVariable, myFunction } from './export.js';
console.log(myVariable); // 输出 "hello"

// 使用导出的函数
myFunction();

总结一下：

export default 用于单个默认导出项，且导入时可自定义名称。
export 命名导出用于导出多个具体标识符的成员，导入时需按原名引用。

 

Link: https://www.cnblogs.com/farwish/p/18071690