数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究JavaScript 中的默认导出与命名导出
在本文中，我们将学习 JavaScript 中默认导出和命名导出的区别，以及如何使用它们来有效地组织代码结构。
在 JavaScript 中，我们可以使用默认导出和命名导出，以便为不同的代码片段创建单独的文件或模块。这有助于在很大程度上提高代码的可读性和树状抖动。
默认导出 |
命名导出 |
|---|---|
默认导出允许我们将单个值或函数导出为模块的默认导出。 |
命名导出允许我们从模块中导出多个值或函数。 |
使用默认导出的文件中，只有一个值可用。 |
我们可以使用使用命名导出的文件中一个或多个值。 |
让我们看一些示例和方法来更好地理解这个概念 -
示例 1 - 使用默认导出
在这个例子中，我们将 -
创建一个名为 module.js 的模块，该模块导出一个默认值（message）。
在 script.js 中，我们将使用 import 语句导入默认导出并将其分配给变量 message。然后将该值记录到控制台。
文件名 - index.html
<html> <head> <title>Default Export Example</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Default Export Example</h1> </body> </html>
文件名 - module.js
// module.js const message = 'Hello, World!'; export default message;
文件名 - main.js
// main.js import message from './module.js'; console.log(message); // Output: Hello, World!
输出
结果将类似于下图。
示例 2 - 使用命名导出
在这个例子中，我们将 -
创建一个名为 module.js 的模块，该模块导出两个命名函数（add 和 subtract）。
在 script.js 中，我们将使用花括号 {} 导入这些命名导出，并相应地调用这些函数。
文件名 - index.html
<html> <head> <title>Named Export Example</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Named Export Example</h1> </body> </html>
文件名 - module.js
// module.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
文件名 - main.js
// main.js
import { add, subtract } from './module.js';
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3
输出
结果将类似于下图。
结论
默认导出和命名导出为在 JavaScript 模块中导出和导入值提供了不同的方法。默认导出对于提供单个主要导出很有用，而命名导出允许我们从 JavaScript 模块中导出多个值。这些特性使我们能够在代码中引入模块化编程，并在很大程度上提高代码的可读性和树状抖动。我们学习了 JavaScript 中默认导出和命名导出的区别，使用了不同的方法，并通过一些示例进行了说明。
824 次浏览
