JavaScript中import用法总结

一、介绍

在现代JavaScript中，由于前后端的合并，前端框架和库变得更加流行。尤其是React、Vue、Angular等框架的引入，对项目的开发有非常大的帮助作用，更可以提高项目的开发效率，简化了开发流程。为了使这些框架和库能够生效，我们需要使用ES6模块加载系统。import和export是ES6中原生导入/导出模块的语法，这种语法可以让我们从其他模块中载入部分内容，然后再将其嵌入到自己的模块中。

二、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 , export2 as alias2 , ... } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

其中，使用“import defaultExport from"这种格式可以让我们载入一个模块的默认输出。如果代码引入模块中的所有内容，我们可以使用“impot * as name from"这种格式。至于特定导出内容的情况，我们可以使用“import { export } from"，将模块中的特定输出内容导入。在特殊情况下，我们可以为导入的特定内容取别名，具体做法可以使用“import { export as alias } from"。对于特定命名的多个输出内容，我们也可以将它们一起载入，代码使用“import { export1 , export2 } from"。还可以为特定命名的多个输出内容使用别名，具体做法是“import { export1 , export2 as alias2 , ... } from"。对于多个输出的作为默认导出的情况，我们可以使用“import defaultExport, { export[ , [...] ] } from"格式。最后，“import "module-name";”该语法可以被用来帮助提前加载一个模块。

三、示例说明

以一个简单应用示例来说明import语句的用法。

假设：“user.js”用于导出用户信息记录，包含三个成员：

export const name = "John";
export const age = 25;
export const job = "Engineer";

我们可以通过import语句导入他们，我们新建一个js文件，并命名为“main.js”。具体做法是：

// 引入必要的模块
import { name, age, job } from "./user.js";

// 输出信息
console.log(name); // John
console.log(age); // 25
console.log(job); // Engineer

这里的import语句使用了“import { name, age, job } from "./user.js";“这种格式，从而导入了user.js文件中的name、age和job数据。我们在main.js中引用时，这三个导出都看作是变量。这种导入方法称为具名导入，它可以让您从模块中导入指定名称的输出。

另外，你也可以将文件中的全部内容都导出：

// 引入必要的模块
import * as userDetails from "./user.js";

// 输出信息
console.log(userDetails.name);
console.log(userDetails.age);
console.log(userDetails.job);

这里的import语句使用了“import * as userDetails from "./user.js";”这种格式，它导入了user.js中所有的成员并给它们起了一个别名：userDetails。在这种模式下，我们可以使用“userDetails.name”这样的语法访问name变量。