ES6中import与export的用法详解-EW帮帮网

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

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

批量导出：

// utils.js
const pi = 3.14;
function multiply(a, b) { return a * b; }

export { pi, multiply };

// main.js
import { pi, multiply } from './utils.js';
console.log(multiply(pi, 2)); // 输出: 6.28

2. 默认导出（Default Export）

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

示例：

// user.js
const user = { name: 'Alice', age: 25 };
export default user;

// main.js
import myUser from './user.js';
console.log(myUser.name); // 输出: Alice

默认导出函数或类：

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

// main.js
import sum from './calculator.js';
console.log(sum(3, 4)); // 输出: 7

3. 导出语句的统一声明

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

示例：

// tools.js
const base = 10;
function square(n) { return n * n; }

export { base, square };

// main.js
import { 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)); // 输出: 5
console.log(add(1, 1)); // 输出: 2

4. 导入整个模块

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

import * as math from './math.js';
console.log(math.add(2, 3)); // 输出: 5
console.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/await
const module = await import('./math.js');
console.log(module.add(2, 3)); // 输出: 5

2. 动态导入的应用场景

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

五、注意事项

1. 模块环境配置

浏览器环境：需在<script>标签中添加type="module"。
```
<script type="module" src="main.js"></script>
```
Node.js环境：在package.json中设置"type": "module"。

2. 常见错误

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

六、总结

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

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

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

ES6中import与export的用法详解

一、ES6模块化的核心概念

1. 模块化的基本规则

二、`export`的用法

1. 命名导出（Named Export）

示例：