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 命名导出用于导出多个具体标识符的成员,导入时需按原名引用。