ES6中import与export的用法详解_es6 export和import

目录

一、ES6模块化的核心概念

1. 模块化的基本规则

二、export的用法

1. 命名导出（Named Export）

示例：

2. 默认导出（Default Export）

示例：

默认导出函数或类：

3. 导出语句的统一声明

示例：

三、import的用法

1. 按需导入命名成员

2. 导入默认成员

3. 同时导入命名成员和默认成员

4. 导入整个模块

5. 重命名导入成员

四、动态导入（Dynamic Import）

1. 动态加载模块

示例：

2. 动态导入的应用场景

五、注意事项

1. 模块环境配置

2. 常见错误

六、总结

一、ES6模块化的核心概念

1. 模块化的基本规则

• 一次性加载：每个模块只会被加载一次，后续请求直接从内存中获取。
• 局部作用域：模块内的变量、函数仅在模块内部生效，不会污染全局作用域。
• 导出（export）：通过export关键字暴露模块中的变量、函数或类。
• 导入（import）：通过import关键字从其他模块中导入已导出的内容。

二、export的用法

1. 命名导出（Named Export）

命名导出允许在模块中导出多个成员，导入时需使用相同的名称。

示例：

// math.jsexport const add = (a, b) => a + b;export const subtract = (a, b) => a - b;// main.jsimport { add, subtract } from \'./math.js\';console.log(add(2, 3)); // 输出: 5console.log(subtract(5, 2)); // 输出: 3

 批量导出：

// utils.jsconst pi = 3.14;function multiply(a, b) { return a * b; }export { pi, multiply };// main.jsimport { pi, multiply } from \'./utils.js\';console.log(multiply(pi, 2)); // 输出: 6.28

2. 默认导出（Default Export）

每个模块只能有一个默认导出，导入时可以使用任意名称。

示例：

// user.jsconst user = { name: \'Alice\', age: 25 };export default user;// main.jsimport myUser from \'./user.js\';console.log(myUser.name); // 输出: Alice

默认导出函数或类：

// calculator.jsexport default function add(a, b) { return a + b; }// main.jsimport sum from \'./calculator.js\';console.log(sum(3, 4)); // 输出: 7

3. 导出语句的统一声明

可以在模块末尾集中导出所有成员。

示例：

// tools.jsconst base = 10;function square(n) { return n * n; }export { base, square };// main.jsimport { base, square } from \'./tools.js\';console.log(square(base)); // 输出: 100

三、import的用法

1. 按需导入命名成员

导入模块中指定的命名导出。

import { add, subtract } from \'./math.js\';console.log(add(1, 2)); // 输出: 3

2. 导入默认成员

直接导入模块的默认导出。

import sum from \'./calculator.js\';console.log(sum(5, 5)); // 输出: 10

3. 同时导入命名成员和默认成员

import sum, { add, subtract } from \'./math.js\';console.log(sum(2, 3)); // 输出: 5console.log(add(1, 1)); // 输出: 2

4. 导入整个模块

将模块的所有导出内容作为一个对象导入。

import * as math from \'./math.js\';console.log(math.add(2, 3)); // 输出: 5console.log(math.subtract(5, 2)); // 输出: 3

5. 重命名导入成员

通过as关键字避免命名冲突。

import { add as sum, subtract } from \'./math.js\';console.log(sum(2, 3)); // 输出: 5

四、动态导入（Dynamic Import）

1. 动态加载模块

import()返回一个Promise，适用于按需加载模块。

示例：

// 动态加载模块import(\'./math.js\') .then(module => { console.log(module.add(2, 3)); // 输出: 5 }) .catch(error => console.error(\'加载失败:\', error));// 使用async/awaitconst module = await import(\'./math.js\');console.log(module.add(2, 3)); // 输出: 5

2. 动态导入的应用场景

• 按需加载：减少初始加载时间，提升性能。
• 条件加载：根据用户操作或设备类型动态加载模块。
• 异步加载：处理大型模块或依赖库。

五、注意事项

1. 模块环境配置

• 浏览器环境：需在标签中添加type=\"module\"。

• Node.js环境：在package.json中设置\"type\": \"module\"。

2. 常见错误

• 默认导出只能有一个：每个模块仅能使用一次export default。
• 命名冲突：导入时需注意名称一致性，可通过as重命名。
• 作用域限制：export语句不能出现在条件语句或函数内部。

六、总结

ES6的export和import为JavaScript模块化提供了标准化的解决方案，其核心优势在于：

1. 代码结构清晰：通过模块化组织代码，降低耦合度。
2. 避免全局污染：模块作用域隔离了变量和函数。
3. 提高复用性：模块可被多个文件共享和调用。
4. 动态加载能力：按需加载模块，优化性能。

通过合理使用export和import，开发者可以构建更高效、更易维护的JavaScript应用程序。在实际开发中，建议根据项目需求灵活选择命名导出或默认导出，并结合动态导入优化加载策略。