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

本文翻译自：What is “export default” in javascript?

File: SafeString.js 文件： SafeString.js

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

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

export default SafeString;

I have never seen export default before. 我之前从未见过export default 。 Are there any equivalent stuff for export default that can be easier to understand? 是否有更容易理解的export default等效内容？

---

#1楼

参考：https://stackoom.com/question/1QbXM/什么是javascript中的-导出默认值

---

#2楼

It's part of the ES6 module system, described here . 它是ES6模块系统的一部分，在此描述 。 There is a helpful example in that documentation, also: 该文档中还有一个有用的示例：

If a module defines a default export: 如果模块定义了默认导出：

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

then you can import that default export by omitting the curly braces: 然后你可以通过省略花括号来导入默认导出：

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

---

Update: As of June 2015, the module system is defined in §15.2 and the export syntax in particular is defined in §15.2.3 of the ECMAScript 2015 specification. 更新：截至2015年6月，模块系统在§15.2中定义，特别是export语法在ECMAScript 2015规范的§15.2.3中定义。

---

#3楼

export default function(){} can be used when the function has no name. 当函数没有名称时，可以使用export default function(){} 。 There can only be one default export in a file. 文件中只能有一个默认导出。 The alternative is a named export. 替代方案是命名导出。

This page describes export default in detail as well as other details about modules that I found very helpful. 此页面详细描述了export default以及我发现非常有用的模块的其他详细信息。

---

#4楼

export default is used to export a single class, function or primitive from a script file. export default用于从脚本文件中导出单个类，函数或基元。

The export can also be written as 导出也可以写成

export default function SafeString(string) {
  this.string = string;
}

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

This is used to import this function in another script file 这用于在另一个脚本文件中导入此函数

Say in app.js , you can 在app.js中说，你可以

import SafeString from './handlebars/safe-string';

A little about export 关于出口的一点点

As the name says, it's used to export functions, objects, classes or expressions from script files or modules 顾名思义，它用于从脚本文件或模块中导出函数，对象，类或表达式

Utiliites.js Utiliites.js

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

This can be imported and used as 这可以导入并用作

App.js App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Or 要么

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

When export default is used, this is much simpler. 使用导出默认值时，这更加简单。 Script files just exports one thing. 脚本文件只输出一件事。 cube.js cube.js

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

and used as App.js 并用作App.js.

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

---

#5楼

As explained on this MDN page 正如此MDN页面上所述

There are two different types of export, named and default. 有两种不同类型的导出，名为default和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