面试题：JavaScript ES6模块中export和export default的区别

Question

请详细阐述JavaScript ES6模块里export和export default这两种导出方式的区别，并各举一个简单示例说明它们的使用场景。

Answer 1

区别

1. 导出数量：
   • export 可以有多个，一个模块中可以导出多个变量、函数或类。例如可以同时导出一个函数和一个变量。
   • export default 每个模块只能有一个默认导出。
2. 导入方式：
   • 使用 export 导出时，导入必须明确指定导出的名称。
   • 使用 export default 导出时，导入时可以自定义名称。
3. 适用场景：
   • export 适用于一个模块需要导出多个相关的功能或数据的场景。
   • export default 适用于模块只有一个主要的输出，比如一个类、一个函数等，导入时不需要记住具体名称，方便简洁。

示例

export示例

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

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

export default示例

// greeting.js
const greet = () => 'Hello!';
export default greet;

// main.js
import customGreet from './greeting.js';
console.log(customGreet());