ECMAScript 2021 (ES12) 中的 export* ,export default 与 export 的区别及使用方式

在ES6以前，JavaScript对于模块化的支持是非常有限的，只能依赖于一些工具来加以实现。但自从ES6开始，JavaScript引入了一系列新的语法特性，其中包含了一种全新的模块化语法。这个新的模块化语法一经推出，其就成为了前端领域的热门话题，也是每个前端工程师都必须了解的知识点之一。

其中，在ES6的这种新的模块化语法中，有三种常用的导出语法：export *、export default和export。本篇文章将为您详细解析这三种导出语法的区别及使用方式，并提供相关示例代码，以便更好地了解和理解。

Export *

这种导出语法可以将目标模块中的所有导出内容，全都导出到当前模块中，可以用以下方式来实现：

// module_a.js
export let a = 1;
export let b = 2;
export let c = 3;

// module_b.js
export * from './module_a';

从上述示例中可以看出，ES6模块允许使用export * 的方式导出模块中的所有导出，使用方式十分简单：在目标模块中，直接使用export * 将导出当前模块中的所有内容。

Export default

当导出内容只有一个时，我们通常使用export default语法导出：

// common.js
let common = {
  name: 'Common',
  log() {
    console.log('Common module.');
  }
};
export default common;

从上述示例中可以看出，在一个模块中，有且仅有一个导出可以使用export default语法进行导出。

Export

在ES6模块的导出语法中，使用export关键字导出某个指定的内容，其语法如下：

// module_a.js
export const a = 1;

// module_b.js
import { a } from './module_a';

其中，export关键字通过指定的名称来导出一个变量、函数或一个类，是ES6语法中定义导出的最基本方式。

总结：

1. 当我们想把其他模块里的方法或变量全部导出的时候，我们可以使用 export * from语法完成；
2. 当一个module只输出一个值时，我们使用 export default；
3. 当我们要输出多个值时，我们使用 export。

希望通过本篇文章的介绍，能够让大家更好的理解ES6模块中的导出语法，更高效地编写代码。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528e8727d4982a6ebb7608a