默认导出(default)和命名导出

1.默认导出

优点：

简洁的导入语法： 导入时不需要使用花括号，可以直接重命名。
单一职责： 模块导出一个主要功能或对象时，默认导出更符合逻辑。

适用场景：

模块只有一个导出： 如一个组件、一个类或一个函数。
使用频繁的库： 比如 React 组件和 Vue 组件通常使用默认导出。

示例：

// utils.js
export default function calculateSum(a, b) {
  return a + b;
}

// usage.js
import calculateSum from './utils';
console.log(calculateSum(2, 3));  // 输出 5

2.命名导出

优点：

明确的命名： 在导入时明确知道导入的是什么。
多个导出： 允许从同一个模块中导出多个函数、对象或变量。
避免命名冲突： 在导入时可以使用 as 进行重命名，避免冲突。

适用场景：

模块有多个导出： 比如一个工具函数库。
公共常量或类型： 例如导出多个相关的常量或类型定义。

示例：

// utils.js
export function calculateSum(a, b) {
  return a + b;
}

export function calculateDifference(a, b) {
  return a - b;
}

// usage.js
import { calculateSum, calculateDifference } from './utils';
console.log(calculateSum(2, 3));  // 输出 5
console.log(calculateDifference(5, 2));  // 输出 3

3.综合使用

在实际项目中，可以结合使用默认导出和命名导出，以便利用两者的优势。例如，一个模块可以有一个默认导出和多个命名导出：

示例：

// mathUtils.js
export default function calculateSum(a, b) {
  return a + b;
}

export function calculateDifference(a, b) {
  return a - b;
}

export const PI = 3.14;

使用：

// usage.js
import calculateSum, { calculateDifference, PI } from './mathUtils';
console.log(calculateSum(2, 3));  // 输出 5
console.log(calculateDifference(5, 2));  // 输出 3
console.log(PI);  // 输出 3.14