JavaScript中import用法总结
作者:代码拾荒时间:2026-10-22 20:33:52浏览:337
本文详解JavaScript中import语句的用法,涵盖从模块导入函数、对象及原始值的方法。重点区分default默认导出与named命名导出的导入语法差异,通过具体代码示例展示如何正确引入并调用模块内容,帮助开发者掌握ES6模块系统的核心导入机制。
import语句概述
import语句用于将指定模块中导出的函数、对象或初始值引入到当前模块中。
具体语法结构如下所示。
import {模块名称} from "需要导入模块的路径名"
import导入语法
如何正确使用import语句?
模块导出方式主要分为default(默认)导出和named(命名)导出两类。
首先加载包含default export的模块以及包含named export的模块。
import {ModuleA, ModuleB} from "modules";
import Default from 'modules2';
在第一行代码中,从modules文件中导入了名为Module A和Module B的两个命名模块。
在第二行代码中,从modules2文件中导入了默认模块。
模块导出方式
执行模块导出操作。
若要将函数、对象或原始值作为模块导出,需使用export关键字。
代码示例演示
接下来通过具体示例进行说明。
将内容导出为默认模块。
// alert.js
export default function () {
alert("default module called!");
};
进行命名导出。
// utils.js
export function sum(x, y, z) {
return x+y+z;
}
export function multiply(x, y) {
return x*y;
}
我们可以导出名为sum和multiply的模块。
可通过如下方式调用这些函数。
import { sum, multiply } from 'utils';
console.log(sum(1, 2, 3));
console.log(multiply(5, 8));
执行结果如下所示。
->6
->40
作者最新文章
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
JavaScript自学路线图:从基础语法到ES6+核心特性
2026-11-05 11:30:32
