JavaScript ES6模块导入与导出的三种方式详解

作者:半夏

时间:2026-10-25

浏览:518

本文详细介绍JavaScript ES6模块系统的三种导入导出方式:默认导入导出、按需导入导出以及两者结合使用。通过具体语法示例和常见错误分析,帮助开发者掌握模块引用的核心机制与注意事项。

文章目录

前言

ES6模块化导入与导出包含三种方式:1默认导入导出,2按需导入导出,以及3默认导出和整体导出结合使用。以下分别演示这三种方式的具体应用。

1. 默认导入导出

默认导出的语法格式为:export default 默认导出的成员。

对应的默认导入语法为:import 接收名称 from '模块路径'。

前言

前言

前言

2. 按需导入导出

按需导出的语法格式为:export const s1 = 10。

按需导入的语法格式为:import { 按需导入的名称 } from '模块路径'。

例如,若仅需导入name和age两个属性,可使用如下方式。

前言

前言

执行结果成功输出张三、18。

前言

需要注意:1. 此处将age重命名为Age,若后续仍尝试使用age进行console.log()操作,将引发报错。

2. 若在导入语句中未包含sex,同样会导致报错。

第一种情况,age is not defined

前言

前言

第二种情况,sex is not defined

前言

前言

3. 默认导出和整体导出一起使用

前言

前言

前言

总结

到此这篇关于JavaScript ES6模块导入和导出的文章就介绍到这了,更多相关ES6模块导入导出内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章