面试题：JavaScript模块的导出方式有哪些

Question

请详细阐述JavaScript模块中常见的导出方式，如export、export default的用法及区别，并举例说明。

Answer 1

export 用法

1. 命名导出：可以在模块中导出多个命名的变量、函数或类。
   • 导出单个：

// utils.js
export const add = (a, b) => a + b;

• 批量导出：

// utils.js
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
export { subtract, multiply };

• 导入使用：

// main.js
import { add, subtract, multiply } from './utils.js';
console.log(add(2, 3));
console.log(subtract(5, 3));
console.log(multiply(4, 2));

export default 用法

1. 默认导出：一个模块只能有一个默认导出。可以是变量、函数或类。
   • 导出函数：

// greet.js
const greet = (name) => `Hello, ${name}!`;
export default greet;

• 导出变量：

// config.js
const apiUrl = 'https://example.com/api';
export default apiUrl;

• 导入使用：

// main.js
import greet from './greet.js';
import apiUrl from './config.js';
console.log(greet('John'));
console.log(apiUrl);

区别

1. 数量限制：
   • export 支持多个命名导出，一个模块可以有多个 export 语句。
   • export default 一个模块只能有一个默认导出。
2. 导入方式：
   • 使用 export 导出的，导入时需要使用大括号 {} 来解构对应的命名。
   • 使用 export default 导出的，导入时不需要大括号，可以自定义导入的名称。