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

时间:2014-01-14 15:21:21

标签: javascript node.js ecmascript-6

档案: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 defaultexport default是否有更易于理解的等效内容?

9 个答案:

答案 0 :(得分:352)

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

  

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

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

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

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

更新:截至2015年6月,模块系统在§15.2中定义,特别是export语法在ECMAScript 2015的§15.2.3中定义说明书

答案 1 :(得分:112)

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

答案 2 :(得分:65)

当函数没有名称时,可以使用

export default function(){}。文件中只能有一个默认导出。替代方案是命名导出。

page详细介绍了export default以及我发现非常有用的模块的其他详细信息。

答案 3 :(得分:6)

如对此

所述
  

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

例如:

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

答案 4 :(得分:4)

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

答案 5 :(得分:3)

我之所以写这篇文章,是因为(我想我很累),我不太了解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();当我们使用“导出默认值”时,这会很好用,基本上就是它-它允许我们使用默认值随意命名它


P.s。如果要测试示例-首先创建文件,然后在浏览器中允许CORS->如果您在浏览器的URL中使用firefox类型:about:config->搜索“ privacy.file_unique_origin” ->将其更改为“ false”->打开index.html->按F12打开控制台并查看输出->欣赏,别忘了将cors设置恢复为默认设置。

P.s.2对不起,傻傻的变量命名

更多信息@ link2mediumlink2mdn1link2mdn2

答案 6 :(得分:2)

在我看来,关于默认导出的重要是,可以使用任何名称导入!

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

答案 7 :(得分:2)

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

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

上找到详细说明

答案 8 :(得分:0)

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

当函数没有名称时,可以使用

导出默认值函数(){}。一个文件中只能有一个默认导出。

read more