面试题：JavaScript模块中默认导出与命名导出的区别

Question

在JavaScript模块中，阐述默认导出（default export）和命名导出（named export）的使用场景、语法差异，并举例说明如何在导入时进行相应的处理。

Answer 1

使用场景

• 默认导出（default export）：适用于模块主要导出单个实体的场景，比如一个模块只有一个主要功能或对象。例如一个专门用于处理日期格式化的模块，可能只有一个核心的格式化函数作为主要输出。
• 命名导出（named export）：适用于模块需要导出多个相关功能或值的场景。例如一个数学工具模块，可能导出多个不同的数学计算函数，如加法、减法、乘法函数等。

语法差异

• 默认导出（default export）：
  • 导出语法：

    // 方式一：直接在函数或类定义处导出
    export default function myFunction() {
      console.log('This is a default exported function');
    }
    // 方式二：先定义，后导出
    function myFunction() {
      console.log('This is a default exported function');
    }
    export default myFunction;
    

  • 导入语法：

    import myFunction from './myModule.js';
    myFunction();
    

• 命名导出（named export）：
  • 导出语法：

    // 方式一：直接在函数或变量定义处导出
    export function add(a, b) {
      return a + b;
    }
    export const PI = 3.14159;
    // 方式二：先定义，后导出
    function subtract(a, b) {
      return a - b;
    }
    const E = 2.71828;
    export {subtract, E};
    

  • 导入语法：

    // 导入单个命名导出
    import {add} from './mathModule.js';
    console.log(add(2, 3));
    // 导入多个命名导出
    import {add, subtract} from './mathModule.js';
    console.log(add(2, 3));
    console.log(subtract(5, 3));
    // 导入时重命名
    import {add as sum, subtract as difference} from './mathModule.js';
    console.log(sum(2, 3));
    console.log(difference(5, 3));
    // 导入所有命名导出并通过对象访问
    import * as math from './mathModule.js';
    console.log(math.add(2, 3));
    console.log(math.subtract(5, 3));