有两种不同的导出类型，命名和默认。每个模块可以有多个命名导出，但只有一个默认导出。每种类型都对应于上述类型之一。来源：MDN

命名导出

export class NamedExport1 { }

export class NamedExport2 { }

// Import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

默认导出

export default class DefaultExport1 { }

// Import class
import DefaultExport1 from 'path-to-file' // No curly braces - {}

//可以为默认导入使用其他名称

import Foo from 'path-to-file' // This will assign any default export to Foo.

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。

在我看来，默认导出的重要之处在于它可以用任何名称导入！

如果有一个文件foo.js，它将导出默认值：

导出默认函数foo（）｛｝

可以使用以下方法在bar.js中导入：

从“foo”导入栏import Bar from'foo'//或您希望分配给此导入的任何其他名称

ES6中有两种出口：

命名导出-例如，导出函数func（）｛｝是一个名为func的命名导出。可以使用import｛exportName｝从“module”；导入命名模块；。在这种情况下，导入的名称应与导出的名称相同。要导入示例中的func，必须使用import｛func｝from'module'；。一个模块中可以有多个命名导出。

默认导出-是将从模块导入的值，如果您使用简单的import语句import X from'module'。X是将在本地为指定包含该值的变量指定的名称，它不必像原始导出那样命名。只能有一个默认导出。

模块可以同时包含命名导出和默认导出，并且可以使用“module”；中的import defaultExport、｛namedExport1、namedExport3等…｝将它们一起导入；。

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

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

导出默认值用于从文件中仅导出一个值，该文件可以是类、函数或对象。默认导出可以使用任何名称导入。

//file functions.js

export default function subtract(x, y) {
  return x - y;
}

//importing subtract in another file in the same directory
import myDefault from "./functions.js";

在导入的文件中，减法函数可以称为myDefault。

导出默认值还会创建一个回退值，这意味着如果您尝试导入命名导出中不存在的函数、类或对象。将提供默认导出提供的回退值。

有关详细说明，请访问https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export