什么是javascript中的“导出默认值”?


570

档案: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更容易理解?



2
export关键字详细信息在这里。当前,任何网络浏览器都不支持它本身。
RBT

3
现在,除IE之外,所有浏览器均支持该功能。
布赖恩·迪·帕尔玛


看哪,请看上面的^答案;请在下面的\ /中查找混淆。我已经给你看过了吗
安德鲁

Answers:


456

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

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

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

那么您可以通过省略花括号来导入默认导出:

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

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


1
@GeenHenk我想这是可以预期的,因为ES6仍然是草案。我提供了更新的链接和免责声明。
pswg 2015年

7
我不知道怎样导出默认功能(){}是从任何不同的出口=函数(){} ....
亚历山大·米尔斯

1
在类似情况的情况下,export const Foo = () => {}然后在文件末尾,export default Foo我在许多反应示例中看到了这一点。这两个出口是什么?
FlavorScape

最好看到一个带有默认名称导出的示例。换句话说,这种出口将满足import foo, { bar, baz } from './foo';
gumkins'Apr

1
感谢您的回答,但是第二个示例中foo的用法有点模棱两可;什么是foo,以及您如何命名第一个文件;你怎么能做import foo from "foo"?是否存在一个包含foo的对象,因为在第一个示例中,您导出的函数未命名。@pswg
nosahama

159

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

78

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

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


14
如果需要,可以同时使用默认导出和命名导出。
Bergi

@Greg胶页面已过时。它重定向到exploringjs.com/es6/ch_modules.html
rajakvk 2015年

@rajakvk,是的,但是原始页面为那些入门的人提供了更多的背景信息。
Greg Gum 2015年

7
这个答案比公认的要好,因为它解释了什么default意思,对我来说,这个词的问题是。
Dariusz Sikorski

1
@DariuszSikorski接受的答案说明了什么default意思,即可以在不使用花括号的情况下导入默认导出。这个答案实际上是非常错误的,因为它说您只能default在文件中只有一个导出的情况下使用,而事实并非如此。同一文件中可以有多个导出,但是当然只能将default其中一个设置为一个。
realUser404

38

我之所以写这篇文章,是因为(我想我很累),我不太了解MDN,也不了解其他人,描述和理解某事的最佳方法是将其教给其他人。只是我看不到这个问题的简单答案。

什么是javascript中的“导出默认值”?

在默认导出中,导入的命名是完全独立的,我们可以使用任何喜欢的名称。

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

可以说我们有3个模块和一个index.html:

  • modul.js
  • modul2.js
  • modul3.js
  • index.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;

modul3.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- >如果您在浏览器的URL中使用firefox类型:about:config->搜索“ privacy.file_unique_origin”->更改将其设置为“假”->打开index.html->按F12打开控制台并查看输出->享受,不要忘记将cors设置恢复为默认设置。

Ps2对不起,傻傻的变量命名

更多信息@ link2mediumlink2mdn1link2mdn2


4
这应该被认为是最好的答案,但是我尽了我最大的努力。
Jarmos

1
非常感谢你!
合并

1
这应该是举手
nosahama

16

如本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

6

在我看来,默认导出很重要,它可以使用任何名称导入!

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


0

有两种不同类型的导出,即nameddefault。每个模块可以有多个命名导出,但是只有一个默认导出。每种类型对应于上述之一。 资料来源: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.

-3

导出默认值用于导出单个类,函数或基元。

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

阅读更多

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.