export default

export default 是 JavaScript 中的一个关键字，用于在模块系统中导出默认的输出。这个特性在 ES6（ECMAScript 2015）中被引入，目的是为了提供一种更简洁的方式来组织和共享代码。

基础概念

在 JavaScript 模块系统中，你可以使用 export 关键字来导出函数、对象或原始值，以便其他模块可以通过 import 语句来使用它们。export default 允许你导出一个默认的输出，这意味着你可以给导入的模块指定任意名称。

相关优势

1. 简化导入：使用 export default 导出的模块在导入时不需要使用花括号，并且可以为导入的模块指定任意名称。
2. 单一导出：每个模块只能有一个默认导出，这有助于保持模块的单一职责原则。
3. 易于使用：对于简单的模块，使用默认导出可以使代码更加直观和易于理解。

类型与应用场景

• 类型：默认导出可以是任何 JavaScript 类型，包括函数、类、对象或原始值。
• 应用场景：当你有一个模块，它主要提供单一的功能或值，并且你不希望导入者必须记住特定的名称时，使用默认导出是合适的。

示例代码

导出默认值

// mathFunctions.js
const add = (x, y) => x + y;

export default add;

导入默认值

// app.js
import sum from './mathFunctions.js';

console.log(sum(1, 2)); // 输出: 3

遇到的问题及解决方法

问题：为什么我不能同时使用 export default 和具名导出？

原因：一个模块只能有一个默认导出，但可以有多个具名导出。如果你尝试同时使用 export default 和具名导出，可能会导致混淆或错误。

解决方法：如果你需要导出多个值，应该使用具名导出而不是默认导出。

// 正确的方式
export const add = (x, y) => x + y;
export const subtract = (x, y) => x - y;

// 或者使用默认导出一个对象
const mathFunctions = {
  add: (x, y) => x + y,
  subtract: (x, y) => x - y,
};

export default mathFunctions;

问题：为什么导入默认导出时不需要使用花括号？

原因：默认导出是为了提供一种更简单的导入方式，因此不需要使用花括号。具名导出需要使用花括号来指定导入的名称。

解决方法：如果你需要导入具名导出，记得使用花括号。

// 导入具名导出
import { add, subtract } from './mathFunctions.js';

通过理解 export default 的概念和使用方法，你可以更有效地组织和共享你的 JavaScript 代码。