面试题：JavaScript ES6模块语法之中等难度

Question

请描述ES6模块中export和export default的区别，并举例说明如何在一个模块中使用这两种导出方式，以及在另一个模块中如何导入。

Answer 1

区别

1. export：
   • 可以有多个，用于导出多个变量、函数、类等。
   • 导出时需明确指定名称，导入时要与导出名称一致。
2. export default：
   • 每个模块只能有一个export default。
   • 导出时无需指定名称，导入时可自定义名称。

示例

模块导出

假设创建一个mathUtils.js模块：

// 使用export导出多个函数
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}
// 使用export default导出一个函数
export default function multiply(a, b) {
    return a * b;
}

模块导入

在另一个main.js模块中导入：

// 导入export default导出的函数，自定义名称为mult
import mult from './mathUtils.js';
// 导入export导出的函数，名称要与导出一致
import {add, subtract} from './mathUtils.js';

console.log(mult(2, 3));// 输出6
console.log(add(2, 3));// 输出5
console.log(subtract(3, 2));// 输出1