面试题：JavaScript ES6模块默认导出与命名导出的特性差异

Question

在JavaScript ES6模块中，默认导出和命名导出在重命名、导入方式、导出数量等方面有哪些主要差异？请详细阐述并举例说明。

Answer 1

重命名

• 默认导出：在导入时不能对默认导出进行重命名，因为每个模块只能有一个默认导出，导入时直接使用自定义的变量名接收。例如：

  // 模块定义
  const message = 'Hello, world!';
  export default message;
  
  // 导入
  import msg from './module.js';
  console.log(msg);
  

• 命名导出：在导入时可以对命名导出进行重命名，使用as关键字。例如：

  // 模块定义
  export const name = 'John';
  export const age = 30;
  
  // 导入并重命名
  import { name as userName, age as userAge } from './module.js';
  console.log(userName, userAge);
  

导入方式

• 默认导出：导入时使用简洁的语法，无需花括号。例如：

  // 模块定义
  function add(a, b) {
    return a + b;
  }
  export default add;
  
  // 导入
  import sum from './module.js';
  console.log(sum(2, 3));
  

• 命名导出：导入时需要使用花括号将导出的名称括起来，若导入多个，用逗号分隔。例如：

  // 模块定义
  export function subtract(a, b) {
    return a - b;
  }
  export function multiply(a, b) {
    return a * b;
  }
  
  // 导入
  import { subtract, multiply } from './module.js';
  console.log(subtract(5, 3));
  console.log(multiply(2, 4));
  

导出数量

• 默认导出：每个模块只能有一个默认导出。例如：

  // 模块定义，这样写会报错
  // export default function add(a, b) { return a + b; }
  // export default function subtract(a, b) { return a - b; }
  
  // 正确方式：
  function add(a, b) { return a + b; }
  function subtract(a, b) { return a - b; }
  export default add;
  export { subtract };
  

• 命名导出：一个模块可以有多个命名导出。例如：

  // 模块定义
  export const num1 = 10;
  export const num2 = 20;
  export function divide(a, b) { return a / b; }