在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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。