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

小开

最佳答案

它是ES6模块系统这里描述的一部分。留档中还有一个有用的示例：

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

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

小开

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

本页面详细描述了export default以及我发现非常有用的关于模块的其他细节。

小开

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)); // 27console.log(foo);    // 4.555806215962888

或

import * as utilities from 'Utilities';console.log(utilities.cube(3)); // 27console.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

小开

正如这个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

小开

在我看来，关于默认导出的重要事情是它可以被导入任何名称！

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

export default function foo(){}

it can be imported in bar.js using:

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

小开

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

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

假设我们有三个模块和一个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: 123modul2.js:2:10  -> Module2: Saying hello for the second time!index.html:10:9 -> Module2: 456modul3.js:2:10  -> Module3: Saying hello for the third time!

所以更长的解释是：

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

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

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

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

P. S.2：对不起愚蠢的变量命名

更多信息在Link2Media和Link2mdn。

小开

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

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

小开

有两种不同类型的导出，命名和默认。每个模块可以有多个命名导出，但只有一个默认导出。每种类型对应于上述一种。来源：MDN

命名导出

export class NamedExport1 { }
export class NamedExport2 { }
// Import classimport { NamedExport1 } from 'path-to-file'import { NamedExport2 } from 'path-to-file'
// OR you can import all at onceimport * as namedExports from 'path-to-file'

默认导出

export default class DefaultExport1 { }
// Import classimport DefaultExport1 from 'path-to-file' // No curly braces - {}

//您可以为默认导入使用不同的名称

import Foo from 'path-to-file' // This will assign any default export to Foo.

小开

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

//file functions.js
export default function subtract(x, y) {return x - y;}
//importing subtract in another file in the same directoryimport myDefault from "./functions.js";

在导入的文件中，减法函数可以称为myDefault。

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

详细的解释可以在https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export上找到

小开

在ES6中，有两种导出：

命名导出-例如导出函数func（）{}是一个名称为func的命名导出。命名模块可以使用从“模块”导入的导入{exportName}；。在这种情况下，导入的名称应该与导出的名称相同。要导入示例中的func，您必须使用从“模块”导入{func}；。一个模块中可以有多个命名导出。

默认导出-是将从模块导入的值，如果您使用简单的导入语句从“模块”导入X。X是将在本地赋予分配给包含该值的变量的名称，它不必像原始导出那样命名。只能有一个默认导出。

模块可以同时包含命名导出和默认导出，它们可以一起从“模块”中使用导入默认导出、{namedExport1、namedExport3等…}导入。

小开

ES6中引入的一个好特性是javascript模块，它以一种有效的方式，我们可以在不同的.js文件之间export和import变量、函数和类。

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

命名导出

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

// file: source.jsexport const myVariable = /* … */export function myFunction() { /* … */ }export class myClass { /* … */ }

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

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

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

默认导出

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

// file: source.jsexport default myNewFunction() { /* … */ }export const myVariable = /* … */export function myFunction() { /* … */ }export class myClass { /* … */ }

事实上，每个.js文件可以有“多个命名导出”和“只有一个默认导出”_这里myNewFunction被导出为default。有了这个，在target文件中导入时，javascript会理解哪个项目被导出为default。

“默认导出”（myNewFunction）的项目在target.js文件中导入如下：

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

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

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

一些重要的注意事项：

与命名导出不同，在默认导出中，我们不需要导出命名我们也可以导出“未命名”的项目。
为什么他们要在ES6中添加默认导出功能！？导出“未命名项目”（匿名函数和类）以及除了命名项之外，表达式甚至对象文字。