在 ES6 中，我们已经熟悉了 export 和 import 关键字，它们可以让我们在不同的模块之间进行数据的共享。而在 ES7 中，新增了默认导出和命名导出这两种方式，让前端开发变得更加方便。本文详解 ES7 中的默认导出和命名导出的概念、区别、使用方法及示例代码。
默认导出（default）
默认导出只能有一个，且无需指定名称，使用 export default 关键字实现。当我们在导入一个默认导出的模块时，可以为其指定任意名称。
示例代码：
-- -------------------- ---- ------- -- --------- ------ ------- - ----- ------- ---- -- - -- ------- ------ ------ ---- ------------- ------------------------ -- -- ------
再看一个例子：
-- -------------------- ---- ------- -- --------- ------ ------- ----------- -- - ------ - - - - -- ------- ------ ---------- ---- ------------- ------------------------- --- -- -- -
命名导出（named）
命名导出可以有多个，需要指定名称，使用 export { name } 关键字实现。当我们在导入一个命名导出的模块时，需要使用该模块指定的名称。
示例代码：
// module.js
export const name = 'John'
export const age = 30
// main.js
import { name, age } from './module.js'
console.log(name, age) // 输出 'John', 30再看一个例子：
-- -------------------- ---- ------- -- --------- ------ -------- ------ -- - ------ - - - - ------ -------- ----------- -- - ------ - - - - -- ------- ------ - ---- -------- - ---- ------------- ------------------ --- -- -- - ----------------------- --- -- -- -
默认导出和命名导出的区别
默认导出是将整个模块作为一个对象导出，因此在导入时可以为其指定任意名称，而命名导出则需要按名称导入，且导出的是该名称对应的值，例如：
-- -------------------- ---- ------- -- --------- ------ ------- ---------- - -------------------- - ------ ----- ------- - ------- -- ------- ------ ----------- - ------- - ---- ------------- ------------ -- -- ------- -------------------- -- -- -------
使用建议
在 ES7 中，默认导出和命名导出并非一定要选一，而是应按照实际需求选择。默认导出适用于模块只有一个输出的情况，而命名导出则适用于模块有多个输出的情况。
在实际开发中，建议对于不确定使用默认导出还是命名导出的模块，使用命名导出作为主要的导出方式，这样可以更清晰地表示模块的内容，也更方便进行单元测试等工作。
总结
本文详细介绍了 ES7 中的默认导出和命名导出的概念、区别、使用方法及示例代码。无论是默认导出还是命名导出，都可以方便地在不同的模块之间进行数据的共享，提高代码的复用性，让前端开发变得更加便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648264b548841e98941d086c