ES6模块是什么及如何使用
时间:2026-01-17 13:03:41 407浏览 收藏
本篇文章给大家分享《ES6模块是什么?如何导入导出?》,覆盖了文章的常见基础知识,其实一个语言的全部知识点一篇文章是不可能说完的,但希望通过这些问题,让读者对自己的掌握程度有一定的认识(B 数),从而弥补自己的不足,更好的掌握它。
ES6模块化是JavaScript原生支持的作用域隔离与显式依赖声明的代码组织方式,解决全局污染、加载顺序混乱等问题;支持export default与命名导出混用,但导入语法须严格对应;动态import()用于异步按需加载;模块默认严格模式且顶层作用域封闭。

ES6模块化不是“一种新写法”,而是 JavaScript 原生支持的、**作用域隔离 + 显式依赖声明**的代码组织方式。它解决的是全局污染、加载顺序混乱、无法静态分析等问题——你不用再靠 标签顺序硬凑依赖,也不用担心 utils.js 里定义的 getData 覆盖了 api.js 里的同名函数。
export default 和 export 能不能混用?
能,但要清楚后果:一个模块可以同时有 export default(最多一个)和多个 export(命名导出)。导入时必须严格区分语法:
import后不加花括号 → 只能导入export default的内容,名称可自定义import { ... }→ 只能导入命名导出(export const/export function等),名称必须一致,或用as重命名- 两者可共存:
import main, { helper, PI } from './math.js'
/* math.js */
export default function multiply(a, b) {
return a * b;
}
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}⚠️ 容易踩坑:如果误写成 import { multiply } from './math.js',会报 multiply is not exported —— 因为它不是命名导出,是默认导出。
为什么 import './utils.js' 不报错但没效果?
这是「只执行模块顶层代码」的合法用法,常用于注册全局插件、打补丁、初始化副作用(如设置 localStorage 初始值)。但它不导入任何变量,只是让文件运行一遍。
/* logger.js */
console.log('Logger initialized');
export function log(msg) {
console.info('[APP]', msg);
}
<p>/<em> main.js </em>/
import './logger.js'; // ✅ 执行并打印 'Logger initialized'
// ❌ 但这里无法访问 log(),因为没导入</p>常见错误场景:你想引入一个工具函数却只写了 import './utils.js',结果调用 formatDate() 时报 ReferenceError。正确做法是明确导出再导入:export function formatDate() {...} + import { formatDate } from './utils.js'。
动态 import() 是什么?什么时候该用?
import() 是个函数,返回 Promise,用于**按需、异步加载模块**。它不写在顶层,而是在条件分支、事件回调、路由切换中触发,适合做代码分割(code splitting)。
- 不能和
export default/import混用在顶层(语法错误) - 浏览器原生支持(Chrome 63+,Firefox 67+),无需构建工具也能跑
- 配合
await更直观:const module = await import('./heavy-chart.js')
// 点击按钮才加载图表组件
document.getElementById('chart-btn').addEventListener('click', async () => {
const { renderChart } = await import('./chart.js');
renderChart();
});注意:动态导入的模块路径必须是**静态可分析的字符串**(不能是拼接变量),否则打包工具(如 Webpack/Vite)无法做预构建。
最常被忽略的一点:ES6 模块默认是**严格模式 + 顶层作用域封闭**。你在模块里用 var 声明的变量不会挂到 window 上,this 在顶层是 undefined —— 这不是 bug,是设计。别试图绕过它去“模拟全局变量”,该封装就封装,该导出就导出。
终于介绍完啦!小伙伴们,这篇关于《ES6模块是什么及如何使用》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
101 收藏
-
446 收藏
-
164 收藏
-
200 收藏
-
206 收藏
-
396 收藏
-
316 收藏
-
145 收藏
-
478 收藏
-
412 收藏
-
437 收藏
-
169 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习