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

Question

// 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可以更容易理解？

score 595 · Accepted Answer

它是 ES6 模块系统的一部分，在此处进行了描述。该文档中有一个有用的示例，还有：

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

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

score 229 · Accepted Answer

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

score 103 · Accepted Answer

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

此页面详细描述export default了我发现非常有用的模块的其他详细信息。

score 96 · Accepted Answer

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();. 当我们使用 'export default' 时，这会很好地工作，基本上就是这样 -它允许我们在它是 default 时随意命名它。

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

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

更多信息在link2medium和link2mdn中。

score 21 · Accepted Answer

As explained on this MDN page

There are two different types of export, named and default. You can have multiple named exports per module but only one default export[...]Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.But a default export can be imported with any name

For example:

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

score 12 · Accepted Answer

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

score 11 · Accepted Answer

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

如果有一个文件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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

导出和导出默认值有什么区别？

命名导出对于导出多个值很有用。在导入期间，可以使用相同的名称来引用相应的值。

关于默认导出，每个模块只有一个默认导出。默认导出可以是函数、类、对象或其他任何东西。

score -4 · Accepted Answer

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

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

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

10 回答 10

一点关于出口

文件模块.js

文件modul2.js

文件index.html

Related

Reference