什么是 JavaScript 中的“导出默认值”？

它是 ES6 模块系统的一部分，described here。该文档中有一个有用的示例，还有：

如果模块定义了默认导出： // foo.js export default function() { console.log("hello!") } 那么您可以通过省略花括号来导入该默认导出： import foo from "foo";富（）； // 你好！

更新：截至 2015 年 6 月，模块系统在 §15.2 中定义，特别是 export 语法在 ECMAScript 2015 规范的 §15.2.3 中定义。

---

export default 用于从脚本文件中导出单个类、函数或原语。

导出也可以写成

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

这用于在另一个脚本文件中导入此函数

在app.js中说，可以

import SafeString from './handlebars/safe-string';

一点关于出口

顾名思义，它用于从脚本文件或模块中导出函数、对象、类或表达式

实用程序.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

这可以导入并用作

应用程序.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

或者

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

使用导出默认值时，这要简单得多。脚本文件只导出一件事。立方体.js

export default function cube(x) {
  return x * x * x;
};

并用作 App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

---

export default function(){} 可以在函数没有名称时使用。一个文件中只能有一个默认导出。另一种方法是命名导出。

This page 详细描述了 export default 以及我认为非常有用的模块的其他详细信息。

---

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

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

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

模块.js

模块2.js

模块3.js

索引.html

文件模块.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!

所以更长的解释是：

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

所以重要的是“从'./modul3.js'导入blabla”——我们可以说：

“从 './modul3.js 导入 pamelanderson”，然后是 pamelanderson();。当我们使用“导出默认值”时，这将正常工作，基本上就是这样 - 它允许我们在默认情况下随意命名它。

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

PS2：对不起，愚蠢的变量命名

更多信息在 link2medium 和 link2mdn 中。

---

如本 MDN page 所述

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

例如：

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 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.

---

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

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

导出默认函数 foo(){}

可以使用以下命令在 bar.js 中导入它：

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

---

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

//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。

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

可在 https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export 上找到详细说明

---

export default 用于导出单个类、函数或原语。

export default function() { } 可以在函数没有名称时使用。一个文件中只能有一个默认导出。

Read more

---