使用 ECMAScript 2020（ES11）模块从不同的文件导出多个值

随着前端技术的不断发展，JavaScript 语言也在不断地更新和完善。ECMAScript 2020（ES11）是 JavaScript 语言的最新版本，它为前端开发者带来了很多新特性和功能。在本文中，我们将介绍如何使用 ES11 模块从不同的文件导出多个值。

ES11 模块

ES11 模块是一种新的模块系统，它可以让我们在 JavaScript 中轻松地导入和导出模块。ES11 模块使用 import 和 export 关键字来实现模块的导入和导出。

在 ES11 模块中，我们可以从一个模块中导出多个值。这些值可以是变量、函数、类等。同时，我们也可以从不同的文件中导出多个值，并在其他文件中使用它们。

导出多个值

在 ES11 模块中，我们可以使用 export 关键字来导出多个值。下面是一个示例：

// file1.js
export const name = "John";
export const age = 30;
export function sayHi() {
  console.log(`Hi, my name is ${name} and I'm ${age} years old.`);
}

在上面的示例中，我们导出了两个变量 name 和 age，以及一个函数 sayHi()。这些值可以在其他文件中被导入和使用。

导入多个值

在 ES11 模块中，我们可以使用 import 关键字来导入多个值。下面是一个示例：

// file2.js
import { name, age, sayHi } from './file1.js';

console.log(name);
console.log(age);
sayHi();

在上面的示例中，我们从 file1.js 文件中导入了 name、age 和 sayHi() 三个值。然后，在 file2.js 文件中我们可以直接使用这些值。

导出默认值

除了导出多个值，我们还可以使用 export default 关键字来导出默认值。一个模块只能有一个默认导出值。

下面是一个示例：

// file3.js
export default function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

在上面的示例中，我们通过 export default 导出了一个函数 sayHello()。在导入时，我们可以不使用花括号：

// file4.js
import sayHello from './file3.js';

sayHello('John');

总结

在本文中，我们介绍了如何使用 ES11 模块从不同的文件导出多个值。我们学习了如何使用 export 和 import 关键字来实现模块的导入和导出，并且还学习了如何导出默认值。

ES11 模块为前端开发者提供了更加灵活和方便的模块化开发方式。使用 ES11 模块可以让我们更好地组织和管理代码，提高代码的可读性和可维护性。

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