什么是javascript中的"导出默认值"？

Question

文件:SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

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

export default SafeString;

我以前从未见过export default.有没有相同的东西export default可以更容易理解？

Answer 1

它是ES6模块系统的一部分,在此描述.该文档中还有一个有用的示例:

如果模块定义了默认导出:

export default function() { console.log("hello!") }

然后你可以通过省略花括号来导入默认导出:

import foo from "foo";
foo(); // hello!

更新:自2015年6月,该模块系统中定义§15.2和export在特定语法中定义§15.2.3 ECMAScript的2015规范的.

Answer 2

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';

关于出口的一点点

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

Utiliites.js

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

这可以导入并用作

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

使用导出默认值时,这更加简单.脚本文件只输出一件事. cube.js

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

并用作 App.js.

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

Answer 3

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!

所以更长的解释是：

如果您想为模块导出单个内容，则使用“导出默认值”。

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

“从 './modul3.js导入pamelanderson ”，然后pamelanderson();. 当我们使用 'export default' 时，这将工作得很好，基本上就是这样 -当它是 default 时，它允许我们随意命名它。

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

PS2：抱歉愚蠢的变量命名

更多信息在link2medium和link2mdn 中。

Answer 4

export default function(){}当函数没有名称时可以使用.文件中只能有一个默认导出.替代方案是命名导出.

此页描述export default的细节,以及其他详细资料,我发现非常有用的模块.

Answer 5

如本MDN页面所述

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

例如：

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

Answer 6

ES6 中引入的良好功能之一是JavaScript 模块，它以一种有效的方式在export不同import的变量、函数和类之间进行交互.js。

\n

我们有两种不同的导出方式：命名导出和默认导出。要正确理解默认导出，我们首先要理解好命名导出。

\n

命名导出

\n

在这种情况下，在source文件中，我们导出具有特定名称的所需变量、函数或类。语法如下：

\n

// file: source.js\nexport const myVariable = /* \xe2\x80\xa6 */\nexport function myFunction() { /* \xe2\x80\xa6 */ }\nexport class myClass { /* \xe2\x80\xa6 */ }\n

\n

现在，要访问文件中的上述项目target，我们必须按如下方式导入它们：

\n

// file: target.js (in the same directory as the source.js file) \nimport { myVariable } from "./source.js"\nimport { myFunction } from "./source.js"\nimport { myClass } from "./source.js"\n

\n

现在是时候讨论主要问题“默认导出到底是什么”？

\n

默认导出

\n

除了我们按名称导出它们（命名导出）的情况​​外，还有一个称为默认导出的类似功能，该功能在每个文件中只能使用一次.js。请参阅以下示例并将其与之前的source.js文件进行比较：

\n

// file: source.js\nexport default function myNewFunction() { /* \xe2\x80\xa6 */ }\nexport const myVariable = /* \xe2\x80\xa6 */\nexport function myFunction() { /* \xe2\x80\xa6 */ }\nexport class myClass { /* \xe2\x80\xa6 */ }\n

\n

事实上，每个.js文件可以有“多个命名导出”和“只有一个默认导出”_这里myNewFunction导出为default. 这样，当导入文件时target，javascript 就会知道哪个项目导出为default.

\n

“默认导出”( ) 的项目myNewFunction将导入到target.js文件中，如下所示：

\n

// file: target.js (in the same directory as the source.js file)\nimport anyName from "./source.js"\n

\n

仔细看看差异！在这里，我们没有{ }符号 after import，并且我们使用了文件中没有的自定义名称source。这里anyName代表myNewFunction.

\n

这表明我们可以在导入时为“默认导出”的项目指定“任何所需的名称”，只需指向文件的“路径” source，JavaScript 就会找到该文件并导入它。

\n

一些重要的注意事项：

\n

\n

• 与命名导出不同，在默认导出中，我们不需要导出命名项，我们也可以导出“未命名”项。

  \n
\n

• 他们为什么要向 ES6 添加默认导出功能！？除了命名项之外，还能够导出“未命名项”（匿名函数和类）以及表达式，甚至对象文字。

  \n
\n

\n

Answer 7

有两种不同类型的导出，named和default。每个模块可以有多个命名导出，但只能有一个默认导出。每种类型对应于上述之一。 来源：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.

Answer 8

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

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

export default function foo(){}

可以使用以下命令将其导入 bar.js：

import bar from 'foo'
import Bar from 'foo' // Or ANY other name you wish to assign to this import

Answer 9

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

//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上找到

Answer 10

三种不同的导出样式

export foo;
export default foo;
export = foo;

三种匹配的导入样式

import {foo} from 'blah';
import foo from 'blah';
import * as foo from 'blah';