什麼是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