在前端开发中，模块化已经成为一种标配，它能够帮助我们更好地组织代码，提高代码的可维护性和可重用性。而在模块化中，导入和导出模块是必不可少的一环。在 ES6 中，我们已经可以使用 import 和 export 语法来导入和导出模块，而在 ES10 中，这些语法得到了进一步的增强。本文将详细介绍 ES10 中的 import 和 export，以及如何使用它们来导入和导出模块。
导入模块
在 ES10 中，我们可以使用 import 语法来导入模块。import 语法有两种形式，分别是默认导入和命名导入。
默认导入
默认导入是指导入一个模块的默认输出，它可以是任何类型的值。默认导入使用以下语法：
import defaultExport from "module-name";
其中，defaultExport 是导入的默认输出，"module-name" 是要导入的模块名。例如，我们可以通过以下方式导入一个名为 "utils" 的模块：
import utils from "./utils";
在这个例子中，"./utils" 是指当前目录下的 utils.js 文件，而 utils 是该模块的默认输出。
命名导入
命名导入是指导入一个模块的命名输出，它可以是一个对象、函数、类等。命名导入使用以下语法：
import { namedExport1, namedExport2 } from "module-name";其中，namedExport1 和 namedExport2 是要导入的命名输出，"module-name" 是要导入的模块名。例如，我们可以通过以下方式导入一个名为 "utils" 的模块中的两个命名输出：
import { add, subtract } from "./utils";在这个例子中，"./utils" 是指当前目录下的 utils.js 文件，而 add 和 subtract 是该模块的两个命名输出。
导入所有命名输出
除了导入指定的命名输出之外，我们还可以使用 * as 语法来导入一个模块的所有命名输出：
import * as utils from "./utils";
在这个例子中，我们将该模块的所有命名输出都导入到一个名为 utils 的对象中。
导出模块
在 ES10 中，我们可以使用 export 语法来导出模块。export 语法也有两种形式，分别是默认导出和命名导出。
默认导出
默认导出是指将一个模块的默认输出暴露出去，它可以是任何类型的值。默认导出使用以下语法：
export default defaultExport;
其中，defaultExport 是要导出的默认输出。例如，我们可以将一个名为 "utils" 的模块的默认输出暴露出去：
const utils = {
add: (x, y) => x + y,
subtract: (x, y) => x - y
};
export default utils;在这个例子中，我们将一个包含两个函数的对象作为该模块的默认输出。
命名导出
命名导出是指将一个模块的命名输出暴露出去，它可以是一个对象、函数、类等。命名导出使用以下语法：
export { namedExport1, namedExport2 };其中，namedExport1 和 namedExport2 是要导出的命名输出。例如，我们可以将一个名为 "utils" 的模块中的两个函数暴露出去：
export const add = (x, y) => x + y; export const subtract = (x, y) => x - y;
在这个例子中，我们将两个函数分别作为该模块的两个命名输出。
导出所有命名输出
除了导出指定的命名输出之外，我们还可以使用 * as 语法来导出一个模块的所有命名输出：
export * from "./utils";
在这个例子中，我们将该模块的所有命名输出都暴露出去。
示例代码
下面是一个示例代码，它演示了如何使用 import 和 export 导入和导出模块：
-- -------------------- ---- ------- -- -------- ------ ----- --- - --- -- -- - - -- ------ ----- -------- - --- -- -- - - -- -- ------ ------ ----- ---- ---------- ------ - ---- -------- - ---- ---------- ------------------------ ---- -- -- - ------------------ ---- -- -- - ----------------------- ---- -- -- -
在这个例子中，我们定义了一个名为 "utils" 的模块，它包含两个函数 add 和 subtract。然后，在 app.js 文件中，我们分别使用默认导入和命名导入来导入该模块中的内容，并使用这些函数来进行计算。最后，我们将计算结果输出到控制台中。
总结
通过本文的介绍，我们了解了 ES10 中的 import 和 export 语法，以及如何使用它们来导入和导出模块。无论是默认导入还是命名导入，无论是默认导出还是命名导出，它们都是模块化开发中必不可少的一环。希望本文能够对你有所帮助，让你更好地理解和使用 import 和 export 语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661273ded10417a222319738