详解JavaScript 中 `import` 语句的完整指令格式

admin管理员组

文章数量:1441541

详解JavaScript 中 `import` 语句的完整指令格式

JavaScript 中 `import` 语句的完整指令格式

在 JavaScript 中，`import` 语句用于导入由其他模块导出的绑定（如函数、对象或值）。`import` 语句有多种形式，具体取决于您要导入的内容。以下是一些常见的 `import` 语句格式：

1.导入默认导出

如果模块有一个默认导出，您可以使用以下格式导入它：其中defaultExport可以其他任何合法标识符不一定要与默认导出内容所指定的名称同名。

代码语言：javascript代码运行次数：0运行复制

import defaultExport from 'module-name';

假设我们有一个名为 math.js 的模块文件，其中包含一个默认导出：

代码语言：javascript代码运行次数：0运行复制

// math.js
export default function add(a, b) {
return a + b;
}

在这个例子中，add 函数是该模块的默认导出。现在，如果我们想在另一个文件中使用这个函数，我们可以这样做：

代码语言：javascript代码运行次数：0运行复制

// main.js
import add from './math.js';

console.log(add(2, 3)); // 输出: 5　

这里，add 是我们为默认导出选择的名字。你可以选择任何有效的标识符名来代替 add，例如：

代码语言：javascript代码运行次数：0运行复制

import myAddFunction from './math.js';
console.log(myAddFunction(2, 3)); // 输出: 5　

这里，您给被导入模块的默认导出内容指定的任何名称来引用它，`module-name` 是模块的文件名或路径。

2.导入命名导出

如果模块有命名导出，您可以使用以下格式导入一个或多个命名导出：

代码语言：javascript代码运行次数：0运行复制

import { export1, export2 } from 'module-name';

这里，`export1` 和 `export2` 是模块中导出的具体名称。

注意：对于命名导出（named exports），无论是单个导入还是多个导入，都需要使用花括号 {} 来指定要导入的导出项。这是因为命名导出是通过名称来识别的，所以必须明确指出要导入哪一个或哪几个命名导出。

3.导入默认导出和命名导出

您还可以在同一条 `import` 语句中同时导入默认导出和命名导出：

代码语言：javascript代码运行次数：0运行复制

import defaultExport, { export1, export2 } from 'module-name';

4.导入所有命名导出

如果您想导入模块中的所有命名导出，可以使用命名空间导入（也称为导入为对象）：

代码语言：javascript代码运行次数：0运行复制

import * as moduleName from 'module-name';

然后，您可以通过 `moduleName.export1`、`moduleName.export2` 等方式访问命名导出。

5.带有别名的导入

在导入时，您还可以给导入的绑定指定别名：

代码语言：javascript代码运行次数：0运行复制

import { export1 as alias1, export2 as alias2 } from 'module-name';

这里，`alias1` 和 `alias2` 是您给 `export1` 和 `export2` 指定的别名。

关于 `export default`

`export default` 用于在模块中指定一个默认导出。一个模块只能有一个默认导出。默认导出可以是函数、类、对象或任何值。当您使用默认导出时，导入方可以给这个导出指定任何名称（如上述格式1所示）。

示例

假设有一个模块 `math.js`，内容如下：

代码语言：javascript代码运行次数：0运行复制

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default function multiply(a, b) {
return a * b;
}

您可以在另一个文件中这样导入：

代码语言：javascript代码运行次数：0运行复制

// main.js
import multiply, { add, subtract } from './math';

console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 2)); // 输出: 3
console.log(multiply(4, 3)); // 输出: 12

或者，使用命名空间导入：

代码语言：javascript代码运行次数：0运行复制

// main.js
import * as math from './math';

console.log(math.add(2, 3)); // 输出: 5
console.log(math.subtract(5, 2)); // 输出: 3
console.log(math.default(4, 3)); // 输出: 12，注意默认导出的访问方式

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-02-13，如有侵权请联系 cloudcommunity@tencent 删除前往查看函数javascriptimportmath对象

本文标签： 详解JavaScript 中 import 语句的完整指令格式