JavaScript 中 import 和 export 语句的用法？-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 中 import 和 export 语句的用法？

推荐答案

在 JavaScript 中，import 和 export 语句用于模块的导入和导出。它们使得代码可以分割成多个文件，并且可以在不同的文件之间共享功能。

导出模块

使用 export 语句可以将模块中的函数、对象、类或变量导出，以便其他模块可以使用。

-- -------------------- ---- -------
-- ------
------ ----- ---- - --------

-- ------
------ ----- --- - ---
------ -------- ------- -
  ----------------------
-

-- -----
------ ------- ---------- -
  ----------------- -- --- ------- ----------
-

导入模块

使用 import 语句可以导入其他模块中导出的内容。

-- -------------------- ---- -------
-- ------
------ - ---- - ---- --------------

-- ------
------ - ---- ----- - ---- --------------

-- -----
------ ---------- ---- --------------

-- ---------
------ - -- ------ ---- --------------

本题详细解读

1. `export` 语句

export 语句用于从模块中导出函数、对象、类或变量，以便其他模块可以使用这些导出的内容。

命名导出：可以使用 export 关键字导出多个变量、函数或类。导出的内容必须使用 {} 来导入。
```
export const name = 'Alice';
export function greet() {
  console.log('Hello!');
}
```
默认导出：每个模块可以有一个默认导出，使用 export default 语法。默认导出不需要使用 {} 来导入。
```
export default function() {
  console.log('This is the default export.');
}
```

2. `import` 语句

import 语句用于导入其他模块中导出的内容。

导入命名导出：使用 {} 来导入模块中的命名导出。
```
import { name, greet } from './module.js';
```
导入默认导出：默认导出可以直接导入，不需要使用 {}。
```
import myFunction from './module.js';
```
导入所有导出：可以使用 * as 语法导入模块中的所有导出内容，并将其作为一个对象使用。
```
import * as module from './module.js';
console.log(module.name);
module.greet();
```

3. 模块路径

在 import 语句中，模块路径可以是相对路径或绝对路径。相对路径通常以 ./ 或 ../ 开头，表示当前文件所在目录或上级目录。

4. 动态导入

JavaScript 还支持动态导入，使用 import() 函数可以在运行时动态加载模块。

import('./module.js').then(module => {
  module.greet();
});

5. 模块的静态分析

import 和 export 语句是静态的，意味着它们必须在模块的顶层作用域中使用，不能在函数或条件语句中使用。这使得 JavaScript 引擎可以在编译时进行静态分析，优化模块的加载和执行。

纠错
反馈