ES6 导入

ES6 中可以使用 import 关键字来导入其他 JavaScript 文件中的代码，它相当于是 CommonJS 规范中的 require() 方法的替代方案。

导入语法

在 ES6 中，导入语法的一般形式如下：

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";

其中，import 用于导入模块，module-name 是模块的名称或路径；defaultExport 是一个指定的默认导出，name 是一个命名空间，export1, export2, ... 是需要导入的具名导出，alias1, alias2 是具名导出的别名。

导入默认导出

如果模块中定义了默认导出，我们可以使用 import 语法来导入它。默认导出只能存在一个。

import myFunction from "./myModule.js";

其中， myFunction 是需要导入的默认导出，"./myModule.js" 是模块的路径。

导入具名导出

具名导出指的是在模块中通过 export 关键字导出的 JavaScript 对象、函数、变量等。

// 导入一个具名导出
import { myFunc } from "./myModule.js";

// 导入多个具名导出
import { func1, func2, func3 } from "./myModule.js";

我们可以通过花括号来指定需要导入的具名导出的名称，如上面的代码所示。

如果我们希望在导入时指定一个别名，可以使用类似如下的语法：

import { function1 as alias1, function2 as alias2 } from "./myModule.js";

导入命名空间

如果模块中导出了很多变量或函数，我们可以使用 import * 语法导入整个命名空间。

import * as myModule from "./myModule.js";

myModule.myFunction();
myModule.myVariable();

以上代码中，myModule 是一个命名空间，我们可以使用它来访问所有的导出。

导入默认导出和具名导出

如果模块同时存在默认导出和具名导出，我们可以使用以下语法：

import myDefault, { myFunc1, myFunc2 } from "./myModule.js";

其中，myDefault 是需要导入的默认导出的标识符，myFunc1, myFunc2 是需要导入的具名导出的标识符。

导入默认导出和所有导出

如果需要导入一个模块的所有导出，可以使用以下语法：

import myDefault, * as myModule from "./myModule.js";

以上代码中，myDefault 是需要导入的默认导出，myModule 是命名空间，用来访问其他的导出。

使用导入的代码

导入的代码可以直接在导入文件中使用。例如，我们可以在导入文件中调用被导入的函数：

import { myFunc } from "./myModule.js";

myFunc();

或者，我们可以在导入文件中使用命名空间中的函数或变量：

import * as myModule from "./myModule.js";

myModule.myFunction();
myModule.myVariable();

总结

ES6 中的 import 关键字用于导入其他 JavaScript 文件中的代码。它支持导入默认导出、具名导出、命名空间等。使用导入的代码可以直接在导入文件中使用。