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

作者最新文章