ES6中引入的一个好特性是javascript模块,它可以高效地在不同的.js文件之间导出和导入变量、函数和类。
我们有两种不同的导出方式:命名导出和默认导出。要正确理解默认导出,我们必须首先很好地理解命名导出。
命名导出
在本例中,在源文件中,我们导出具有特定名称的所需变量、函数或类。语法如下:
// file: source.js
export const myVariable = /* … */
export function myFunction() { /* … */ }
export class myClass { /* … */ }
现在,要访问目标文件中的上述项,必须按如下方式导入它们:
// file: target.js (in the same directory as the source.js file)
import { myVariable } from "./source.js"
import { myFunction } from "./source.js"
import { myClass } from "./source.js"
现在是时候进入主要问题“默认导出到底是什么”了?
默认导出
除了按名称导出它们(命名为exports)的情况外,还有一个类似的功能,称为默认导出,在每个.js文件中只能使用一次。请参阅以下示例,并将其与之前的source.js文件进行比较:
// file: source.js
export default function myNewFunction() { /* … */ }
export const myVariable = /* … */
export function myFunction() { /* … */ }
export class myClass { /* … */ }
事实上,每个.js文件可以有“多个命名导出”和“只有一个默认导出”,其中myNewFunction作为默认导出。这样,在目标文件中导入时,javascript会了解默认导出的项目。
“导出为默认值”的项目(myNewFunction)将导入target.js文件,如下所示:
// file: target.js (in the same directory as the source.js file)
import anyName from "./source.js"
仔细看看这些区别!这里,我们在导入后没有{}号,我们使用了源文件中没有的自定义名称。这里anyName表示myNewFunction。
这表明,我们可以为导入时“导出为默认值”的项目指定“任何所需名称”,只要指向源文件的“路径”,JavaScript就会找到该文件并将其导入。
一些重要注意事项:
与命名导出不同,在默认导出中,我们不需要导出命名项目,我们也可以导出“未命名”项目。他们为什么要在ES6中添加默认导出功能!?对于能力导出“未命名项”(匿名函数和类)以及表达式,甚至对象文本。