首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >详解JavaScript 中 `import` 语句的完整指令格式

详解JavaScript 中 `import` 语句的完整指令格式

作者头像
jack.yang
发布于 2025-04-05 09:32:58
发布于 2025-04-05 09:32:58
18900
代码可运行
举报
运行总次数:0
代码可运行

JavaScript 中 `import` 语句的完整指令格式

在 JavaScript 中,`import` 语句用于导入由其他模块导出的绑定(如函数、对象或值)。`import` 语句有多种形式,具体取决于您要导入的内容。以下是一些常见的 `import` 语句格式:

1.导入默认导出

如果模块有一个默认导出,您可以使用以下格式导入它:其中defaultExport可以其他任何合法标识符不一定要与默认导出内容所指定的名称同名。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import defaultExport from 'module-name';

假设我们有一个名为 math.js 的模块文件,其中包含一个默认导出:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// math.js
export default function add(a, b) {
return a + b;
}

在这个例子中,add 函数是该模块的默认导出。现在,如果我们想在另一个文件中使用这个函数,我们可以这样做:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// main.js
import add from './math.js';

console.log(add(2, 3)); // 输出: 5 

这里,add 是我们为默认导出选择的名字。你可以选择任何有效的标识符名来代替 add,例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import myAddFunction from './math.js';
console.log(myAddFunction(2, 3)); // 输出: 5 

这里,您给被导入模块的默认导出内容指定的任何名称来引用它,`module-name` 是模块的文件名或路径。

2.导入命名导出

如果模块有命名导出,您可以使用以下格式导入一个或多个命名导出:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { export1, export2 } from 'module-name';

这里,`export1` 和 `export2` 是模块中导出的具体名称。

注意:对于命名导出(named exports),无论是单个导入还是多个导入,都需要使用花括号 {} 来指定要导入的导出项。这是因为命名导出是通过名称来识别的,所以必须明确指出要导入哪一个或哪几个命名导出。

3.导入默认导出和命名导出

您还可以在同一条 `import` 语句中同时导入默认导出和命名导出:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import defaultExport, { export1, export2 } from 'module-name';

4.导入所有命名导出

如果您想导入模块中的所有命名导出,可以使用命名空间导入(也称为导入为对象):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import * as moduleName from 'module-name';

然后,您可以通过 `moduleName.export1`、`moduleName.export2` 等方式访问命名导出。

5.带有别名的导入

在导入时,您还可以给导入的绑定指定别名:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { export1 as alias1, export2 as alias2 } from 'module-name';

这里,`alias1` 和 `alias2` 是您给 `export1` 和 `export2` 指定的别名。

关于 `export default`

`export default` 用于在模块中指定一个默认导出。一个模块只能有一个默认导出。默认导出可以是函数、类、对象或任何值。当您使用默认导出时,导入方可以给这个导出指定任何名称(如上述格式1所示)。

示例

假设有一个模块 `math.js`,内容如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default function multiply(a, b) {
return a * b;
}

您可以在另一个文件中这样导入:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// main.js
import multiply, { add, subtract } from './math';

console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 2)); // 输出: 3
console.log(multiply(4, 3)); // 输出: 12

或者,使用命名空间导入:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// main.js
import * as math from './math';

console.log(math.add(2, 3)); // 输出: 5
console.log(math.subtract(5, 2)); // 输出: 3
console.log(math.default(4, 3)); // 输出: 12,注意默认导出的访问方式
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
5 分钟比较理解 require() vs import()
我们都知道 require() 和 import() 都是用于导入模块的,但是它们差别大有不同,本篇 5 分钟带你进行比较理解~ 轻松易读,温故知新。
掘金安东尼
2022/09/19
9980
5 分钟比较理解 require() vs import()
理解 import 基本用法
语法 不同的 import 的引入方法 import defaultExport from "module-name"; import * as name from "module-name"; import { export } from "module-name"; import { export as alias } from "module-name"; import { export1 , export2 } from "module-name"; import { export1 , expor
西南_张家辉
2021/02/02
5180
require和import的区别
CommonJs 规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的 exports属性(即module.exports)是对外的接口,加载某个模块,其实是加载该模块的module.exports属性。
木子星兮
2020/07/16
1.2K0
详解JavaScript 中 `export ` 语句的完整指令格式
在 JavaScript 中,`export` 语句用于从模块中导出函数、类、对象、变量等,以便其他模块可以通过 `import` 语句导入和使用这些导出的内容。ES6 模块系统提供了多种方式来导出内容,下面详细讲解 `export` 语句的完整指令格式及其用法。
jack.yang
2025/04/05
2460
9个实用的JavaScript开发技巧,你一定要看下
英文 | https://javascript.plainenglish.io/9-javascript-hacks-nobody-talks-about-f15445e301ca
前端达人
2021/04/22
7860
JavaScript编码之路【ES6新特性之模块化】
在令人舒适的ES6(也就是 ECMAScript 2015)之前,我们的JavaScript社区里各种模块化规范和实现让人眼花缭乱。比如说CommonJS,这是一个专门针对服务器端JavaScript的模块化规范。要是你是个Node.js 的粉丝,你一定熟悉这个。它有两个特别简单术语——“require”和 “module.exports” 偶尔还会有个"exports",用这两个英勇的小家伙,你就可以加载和导出你的模块啦!
HelloWorldZ
2024/03/20
2220
Es6学习笔记,持续记录
解构:https://www.runoob.com/w3cnote/deconstruction-assignment.html
房东的狗丶
2023/02/17
3720
医美小程序实战教程(二)
我们上一篇介绍了导航组件的使用方法及变量创建的方法,本篇我们就开始阅读官方模板的代码,通过拆解技术点的形式来夯实前端基础知识。
低代码布道师
2021/11/07
3690
JavaScript 学习-47.export 和 import 的使用
前言 JavaScript 的每个.js文件都是独立的,在开发一个项目会有很多的.js文件,有些是公共的方法,可以单独放到一个.js文件中,其它的文件去调用公共方法。 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持类(class),所以也就没有”模块”(module)了。 export导出模块 在es6以前,还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种:CommonJS 和 AMD ES6标准发布后,module成为标准,标准使
上海-悠悠
2022/09/28
9970
JavaScript 学习-47.export 和 import 的使用
TypeScript 中的 export 和 import
在 TypeScript 中, 经常要使用 export 和 import 两个关键字, 这两个关键字和 es6 中的语法是一致的, 因为 TypeScript = es6 + type !
beginor
2020/08/10
3.9K0
每天3分钟,重学ES6-ES12(十八)ES Module
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第31天,点击查看活动详情
虎妞先生
2022/09/19
2880
Js模块化开发的理解
模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突、管理依赖、提高代码的可读性、代码解耦以及提高代码的复用性。
WindRunnerMax
2020/11/12
2.2K0
一文搞懂 JavaScript 模块化规范:CommonJS、AMD、ES6 Module
在前端开发的历史中,模块化一直是一个核心的问题。随着 JavaScript 应用程序变得越来越复杂,代码的可维护性、复用性和模块化的需求也越来越迫切。
空白诗
2024/09/09
8540
一文搞懂 JavaScript 模块化规范:CommonJS、AMD、ES6 Module
ES6中的export与import入门
ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
跑马溜溜的球
2020/12/07
6260
import export 理解
1.  ES6之前JavaScript没有模块体系,相关社区提供了一些加载方案,最主要是两种CommonJs和AMD两种。ES6在语言标准层面实现了,实现了模块功能而且实现的相当简单,成为服务器和浏览器相通用的解决方案
用户2436820
2018/09/05
8790
import export 理解
TypeScript进阶(四)声明文件
TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的超集,为 JavaScript 添加了静态类型检查和其他一些特性。TypeScript 的声明文件是一种特殊的文件,用于描述 JavaScript 库、框架或模块的类型信息。通过声明文件,我们可以在 TypeScript 中使用第三方 JavaScript 库,并获得类型检查和智能提示的好处。
can4hou6joeng4
2023/11/28
5070
详解 JavaScript 中的模块、Import和Export
在互联网的洪荒时代,网站主要用 HTML和 CSS 开发的。如果将 JavaScript 加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的 JavaScript 代码全都写在一个文件中,并加载到一个 script 标签中。尽管可以把 JavaScript 拆分为多个文件,但是所有的变量和函数仍然会被添加到全局作用域中。
疯狂的技术宅
2020/11/26
2.1K0
前端必知之:前端模块化的CommonJS规范和ES Module规范详解
这种写法很容易存在全局污染和依赖管理混乱问题。在多人开发前端应用的情况下问题更加明显。
肥晨
2024/08/09
4020
从Tree Shaking来走进Babel插件开发者的世界
这里,我们就从Tree Shaking的角度出发来谈谈如何为我们自己的组件库提供按需加载方式。
19组清风
2021/11/15
7530
从Tree Shaking来走进Babel插件开发者的世界
JavaScript 的 7 种设计模式
当启动一个新的项目时候,我们不应该马上开始编程。而是首先应该定义项目的目的和范围,然后列出其功能或规格。如果你已经开始编程或者正在从事一个复杂的项目,则应该选择一个最适合你项目的设计模式。
HelloGitHub
2021/05/14
5950
相关推荐
5 分钟比较理解 require() vs import()
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档