默认导出与命名导出
本课属于 Coddy JavaScript 学习旅程的“面向对象编程”单元。第 10 课，共 56 课。
在 JavaScript 模块中，你有两种主要的代码导出方式：命名导出和默认导出。
命名导出允许你从一个模块中导出多个值：
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}导入具名导出时，花括号中的名称必须完全相同：
// app.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6如果需要重命名具名导入，可以使用 as 关键字创建别名：
// app.js
import { add as sum, subtract as minus } from './math.js';
console.log(sum(5, 3)); // 8
console.log(minus(10, 4)); // 6默认导出允许你从模块中导出一个主要值：
// user.js
const user = {
name: 'John',
age: 30
};
export default user;导入默认导出时，你可以使用任意名称，不需要花括号：
// app.js
import person from './user.js';
console.log(person.name); // 'John'何时使用哪种方式？ 当模块提供多个相关的实用工具（例如，一组辅助函数）时，使用命名导出。当模块只有一个主要用途或主要值（例如，一个类、组件或配置对象）时，使用默认导出。
你可以在同一个模块中组合这两种导出方式：
// vehicle.js
export const wheels = 4;
export const doors = 4;
const car = {
brand: 'Toyota',
model: 'Corolla'
};
export default car;然后将它们一起导入：
// app.js
import myCar, { wheels, doors } from './vehicle.js';
console.log(myCar.brand); // 'Toyota'
console.log(wheels); // 4
挑战
简单你有两个文件。你的任务是在 calculator.js 中设置导出，并在 main.js 中设置导入。
- 在
calculator.js中：将calculate导出为默认导出，将square导出为命名导出 - 在
main.js中：正确导入这两个函数
测试将检查：
- 是否将默认导出用于
calculate - 是否将命名导出用于
square - 这两个导入是否都能正常工作
亲手试试
// TODO：在这里从 calculator.js 导入这两个函数
// 测试
console.log(calculate(10, 5, '+')); // 应输出 15
console.log(square(4)); // 应输出 16
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
面向对象编程中的所有课
8整理 OOP 代码
将类组织到模块中自己练习： JavaScript 在线编译器