如本MDN页所述

有两种不同的导出类型，命名和默认。你可以每个模块有多个命名导出，但只有一个默认值export[…]命名导出对于导出多个值非常有用。在期间导入时，必须使用相应的对象。但可以使用任何名称导入默认导出

例如：

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

导出默认函数（）｛｝可以在函数没有名称时使用。一个文件中只能有一个默认导出。另一种方法是命名导出。

本页详细介绍了导出默认值以及我发现非常有用的模块的其他详细信息。

如本MDN页所述

有两种不同的导出类型，命名和默认。你可以每个模块有多个命名导出，但只有一个默认值export[…]命名导出对于导出多个值非常有用。在期间导入时，必须使用相应的对象。但可以使用任何名称导入默认导出

例如：

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

JavaScript中的“导出默认值”是什么？在默认导出中，导入的命名是完全独立的，我们可以使用任何我们喜欢的名称。

我将用一个简单的例子来说明这一行。

假设我们有三个模块和一个index.html文件：

模块.js模块2.js模块3.js索引html

文件modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

文件modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

模块3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

文件index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; // ! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

输出为：

modul.js:2:10   -> Modul: Saying hello!
index.html:7:9  -> Module: 123
modul2.js:2:10  -> Module2: Saying hello for the second time!
index.html:10:9 -> Module2: 456
modul3.js:2:10  -> Module3: Saying hello for the third time!

因此，更长的解释是：

如果要为模块导出单个对象，则使用“导出默认值”。

因此，重要的是“从'./module3.js'导入blabla”-我们可以改为：

“从'./modul3.js导入pamelanderson”，然后导入pameladerson（）；。当我们使用“导出默认值”时，这将很好地工作，基本上就是这样-它允许我们在默认值时随意命名它。

P.S.：如果你想测试这个示例-首先创建文件，然后在浏览器中允许CORS->如果你使用Firefox，请在浏览器的URL中键入：about:config->搜索“privacy.file_unique_origin”->将其更改为“false”->打开index.html->按F12打开控制台并查看输出->享受并不要忘记将CORS设置返回默认值。

P.S.2：对不起，变量命名太愚蠢了

更多信息请参见link2medium和link2mdn。

导出默认值用于导出单个类、函数或原语。

导出默认函数（）｛｝可以在函数没有名称时使用。一个文件中只能有一个默认导出。

阅读更多信息

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中添加默认导出功能！？对于能力导出“未命名项”（匿名函数和类）以及表达式，甚至对象文本。