ECMAScript 2021 中的默认导出和命名导出

ECMAScript 2021 中的默认导出和命名导出

ECMAScript 2021 是 JavaScript 的最新版本，其中新增了默认导出和命名导出的特性。这两个特性可以帮助开发者更好地组织代码，提高代码的可读性和可维护性。

默认导出

默认导出是指在一个模块中只导出一个默认的值或对象。在导出时，可以使用 export default 关键字来指定默认导出的内容，例如：

// module.js
const name = "John";
export default name;

在另一个模块中，可以使用 import 关键字来导入默认导出的内容，例如：

// app.js
import name from "./module.js";
console.log(name); // 输出 "John"

需要注意的是，一个模块只能有一个默认导出。如果需要导出多个内容，可以使用命名导出。

命名导出

命名导出是指在一个模块中导出多个值或对象，并且每个值或对象都有一个名称。在导出时，可以使用 export 关键字来指定命名导出的内容，例如：

// module.js
export const name = "John";
export const age = 30;

在另一个模块中，可以使用 import 关键字来导入命名导出的内容，例如：

// app.js
import { name, age } from "./module.js";
console.log(name, age); // 输出 "John 30"

需要注意的是，导入时要使用大括号 {} 来指定要导入的内容的名称，名称必须与导出时指定的名称相同。

除了上述的导入方式，也可以使用 import * as 的方式来导入所有的命名导出，例如：

// app.js
import * as module from "./module.js";
console.log(module.name, module.age); // 输出 "John 30"

这种方式会将所有的命名导出都放在一个对象中，可以通过对象的属性来访问导出的内容。

总结

ECMAScript 2021 中的默认导出和命名导出是 JavaScript 中非常重要的特性，可以帮助开发者更好地组织代码，提高代码的可读性和可维护性。需要注意的是，一个模块只能有一个默认导出，而命名导出可以导出多个内容，但名称必须与导出时指定的名称相同。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e6b8a51886fbafa41dbedc