在 ES6 中，我们可以使用默认导出（default export）和命名导出（named exports）两种方式将模块进行导出。这两种方式都非常方便，但是在具体使用时需要注意它们的差异。
默认导出
默认导出允许一个模块只导出一个值或对象，使用 export default 关键字声明。默认导出的值不必使用特定名称来导入，导入时可以自行命名，示例如下：
// javascriptcn.com 代码示例
// module.js
const name = 'ChatGPT';
const age = 18;
export default {
name,
age
};
// app.js
import person from './module.js';
console.log(person.name); // 'ChatGPT'
console.log(person.age); // 18从上述示例可以看出，我们在导出时没有指定任何名称，而在导入时使用了自定义名称 person。这正是默认导出的魅力所在。
需要注意的是，一个模块只能有一个默认导出。如果你需要导出多个值，建议使用命名导出。
命名导出
命名导出允许一个模块导出多个值，每个值都被赋予一个唯一的名称用于导入。通过 export 关键字和花括号 {} 进行声明和导出，在导入时必须使用相同的名称，示例如下：
// javascriptcn.com 代码示例
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// app.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 3
console.log(subtract(3, 2)); // 1需要注意的是，命名导出必须使用相同的名称进行导入。如果在导入时使用了错误的名称，那么代码将无法编译通过。
默认导出和命名导出的混合使用
有时候我们需要同时对外导出一个对象和一些函数或变量，这时候可以使用默认导出和命名导出的混合方式来达到此目的。示例如下：
// javascriptcn.com 代码示例
// utils.js
export const version = '1.0';
export function log(msg) {
console.log(`[${version}] ${msg}`);
}
export default {
name: 'ChatGPT',
age: 18
};
// app.js
import utils, { log, version } from './utils.js';
console.log(utils.name); // 'ChatGPT'
log('Hello World!'); // [1.0] Hello World!
console.log(version); // '1.0'从上述示例中可以看出，我们同时使用了默认导出和命名导出两种方式进行模块导出。
总结
在 ES6 中，我们可以使用默认导出和命名导出两种方式对模块进行导出。默认导出适用于只导出一个值或对象，而命名导出则适用于导出多个值，并且需要使用相同的名称进行导入。我们还可以混合使用这两种方式对模块进行导出，并且建议在导出多个值时优先考虑使用命名导出的方式。
希望本文内容对你有所帮助，如果你有什么问题或意见，请在下方留言，谢谢！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652938937d4982a6ebbc2a83