ES6中import与export的用法详解

目录

一、ES6模块化的核心概念

[1. 模块化的基本规则](#1. 模块化的基本规则)

二、export的用法

[1. 命名导出(Named Export)](#1. 命名导出(Named Export))

示例:

[2. 默认导出(Default Export)](#2. 默认导出(Default Export))

示例:

默认导出函数或类:

[3. 导出语句的统一声明](#3. 导出语句的统一声明)

示例:

三、import的用法

[1. 按需导入命名成员](#1. 按需导入命名成员)

[2. 导入默认成员](#2. 导入默认成员)

[3. 同时导入命名成员和默认成员](#3. 同时导入命名成员和默认成员)

[4. 导入整个模块](#4. 导入整个模块)

[5. 重命名导入成员](#5. 重命名导入成员)

[四、动态导入(Dynamic Import)](#四、动态导入(Dynamic Import))

[1. 动态加载模块](#1. 动态加载模块)

示例:

[2. 动态导入的应用场景](#2. 动态导入的应用场景)

五、注意事项

[1. 模块环境配置](#1. 模块环境配置)

[2. 常见错误](#2. 常见错误)

六、总结


一、ES6模块化的核心概念

1. 模块化的基本规则

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

二、export的用法

1. 命名导出(Named Export)

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

示例:
javascript 复制代码
// 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

批量导出:

javascript 复制代码
// 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)

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

示例:
javascript 复制代码
// user.js
const user = { name: 'Alice', age: 25 };
export default user;

// main.js
import myUser from './user.js';
console.log(myUser.name); // 输出: Alice
默认导出函数或类:
javascript 复制代码
// 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. 导出语句的统一声明

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

示例:
javascript 复制代码
// 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. 按需导入命名成员

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

javascript 复制代码
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 输出: 3

2. 导入默认成员

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

javascript 复制代码
import sum from './calculator.js';
console.log(sum(5, 5)); // 输出: 10

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

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

4. 导入整个模块

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

javascript 复制代码
import * as math from './math.js';
console.log(math.add(2, 3)); // 输出: 5
console.log(math.subtract(5, 2)); // 输出: 3

5. 重命名导入成员

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

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

四、动态导入(Dynamic Import)

1. 动态加载模块

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

示例:
javascript 复制代码
// 动态加载模块
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"

    html 复制代码
    <script type="module" src="main.js"></script>
  • Node.js环境 :在package.json中设置"type": "module"

2. 常见错误

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

六、总结

ES6的exportimport为JavaScript模块化提供了标准化的解决方案,其核心优势在于:

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

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

相关推荐
533_4 分钟前
[echarts] 更新数据
前端·javascript·echarts
l1t8 分钟前
修改DeepSeek翻译得不对的V语言字符串文本排序程序
c语言·开发语言·python·v语言
讨厌吃蛋黄酥11 分钟前
利用Mock实现前后端联调的解决方案
前端·javascript·后端
z樾17 分钟前
Sum-rate计算
开发语言·python·深度学习
钮钴禄·爱因斯晨31 分钟前
赛博算命之八字测算事业运势的Java实现(四柱、五行、十神、流年、格局详细测算)
java·开发语言·aigc
zzywxc78733 分钟前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript
_extraordinary_1 小时前
Java Map和Set
java·开发语言
jingjing~1 小时前
【Qt】QTime::toString(“hh:mm:ss.zzz“) 显示乱码的原因与解决方案
java·开发语言·qt
励志成为糕手1 小时前
深入剖析Spring IOC容器——原理、源码与实践全解析
java·开发语言·spring
杨DaB3 小时前
【SpringMVC】拦截器,实现小型登录验证
java·开发语言·后端·servlet·mvc