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

Question

文件：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，是否有更容易理解的等效内容？

Answer 1

当函数没有名称时，可以使用export default function(){}。一个文件中只能有一个默认导出。另一种选择是命名导出。

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

Answer 2

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';

顾名思义，它用于从脚本文件或模块中导出函数、对象、类或表达式

Utilites.js

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

可以将其导入并用作

应用程序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

当使用export default时，这就简单多了。脚本文件只导出一件事。cube.js

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

并用作app.js

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

Answer 3

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

如果模块定义默认导出：

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

则可以通过省略花括号来导入默认导出：

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

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