ES6中的export const与export default的比较


204

我正在尝试确定这两者之间是否有任何大的区别,而不是export default仅通过执行以下操作即可导入:

import myItem from 'myItem';

使用export const我可以做到:

import { myItem } from 'myItem';

我想知道除此以外是否还有其他差异和/或用例。


1
使用const将使标识符为只读。因此,在原始值的情况下,您可以认为它是不可变的。请注意,该值本身不是一成不变的,因此可以更改对象,数组等,而不必重新分配。
spmurrayzzz 2015年

4
@spmurrayzzz:FWIW,导入绑定也是不变的,就像const
Felix Kling 2015年

感谢您的澄清@FelixKling,不知道
spmurrayzzz

@FelixKling:至少从外面。尽管它们可能不是恒定的,但可以更改出口。
Bergi 2015年

@Bergi:是的,这就是为什么我说导入绑定 ;)
Felix Kling

Answers:


326

这是命名导出与默认导出。export const是导出一个或多个const声明的命名导出。

要强调的是:这里重要的是用于声明一个或多个const声明的export关键字constexport也可以应用于其他声明,例如类或函数声明。

默认导出(export default

每个文件可以有一个默认导出。导入时,您必须指定一个名称并像这样进行导入:

import MyDefaultExport from "./MyFileWithADefaultExport";

您可以给它任何您喜欢的名字。

命名为出口(export

使用命名导出,每个文件可以有多个命名导出。然后导入要用大括号括起来的特定导出:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

或者可以在同一条语句中使用默认值和命名导入:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

命名空间导入

也可以从对象上的文件中导入所有内容:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

笔记

  • 语法更倾向于默认导出,因为它的用例更为常见(请参阅此处的讨论),因为默认导出更为简洁。
  • 默认导出实际上是具有名称的命名导出,default因此您可以使用命名导入来导入它:

    import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

24

export default导入导出的“事物”时会影响语法,允许导入的内容(无论导出了什么)都可以通过选择名称import本身来决定,而无论导出时的名称是什么,仅仅是因为将其标记为“默认”即可。

我喜欢(和使用)一个有用的用例,它允许导出匿名函数而无需显式命名,并且仅当导入该函数时,才应为其指定一个名称:


例:

导出2个功能,其中一个是default

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

导入以上功能。为其中default一个起一个名字:

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

当使用{}语法导入函数(或变量)时,意味着导入的内容在导出时被命名,因此必须使用完全相同的名称导入,否则导入将无法进行。


错误的例子:

  1. 默认功能必须先导入

    import {divide}, square from './module_1.js
  2. divide_1未导出module_1.js,因此不会导入任何内容

    import {divide_1} from './module_1.js
  3. square未在中导出module_1.js,因为{}告诉引擎仅明确搜索命名的导出。

    import {square} from './module_1.js

这并不意味着它会导出单个东西。您可以在同一模块中使用多个命名和一个默认名称。默认仅表示确切含义-如果您在导入时未指定名称(即import something from而不是),则为默认导出import { somethingNamed } from
安德里斯

我还在这里学习了新的英语单词:“错误” +1
Yuval Levy

12

小注释:请注意,从默认导出导入时,命名是完全独立的。这实际上会对重构产生影响。

假设您有一个Foo带有相应导入的类似这样的类:

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

现在,如果您将您的Foo类重构Bar为文件名并重命名该文件,则大多数IDE都不会触摸您的导入。因此,您将得到以下结果:

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

特别是在Typescript中,我非常感谢命名导出和更可靠的重构。区别只是缺少default关键字和花括号。由于您现在已进行类型检查,因此该操作还可以防止您在导入中输入错误。

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

2
'Foo'必须是类名。 ”-不!您可以像使用默认导出一样轻松地进行import { Foo as Anything } from …操作import Anything from …
Bergi

可以使用来重命名它as实际上不是该源注释中的重点。感谢您的不赞成; p
Philipp Sumi

1
我没有投票,但是我不确定该论点是否令人信​​服。我不知道在重构单个模块时是否要我的IDE重命名所有导入,这正是模块化的意义所在: …
Bergi

我同意为了开发人员UX而在这里使用命名导出-但是,您可能会争辩说Typescript本身就是这样。我经常进行重构,并且鉴于每个文件通常有一个类(在我的情况下为:React Component),所以我绝对希望导入文件遵循重命名的组件,以免产生断开连接。当然,这取决于单个开发人员可能有意义,也可能没有意义。
菲利普·苏米

我发现有一篇文章说同样的话。也许是一个合理的位置:我们应该使用export default导出项目的主要对象,尤其是从npm包(代替module.exports =)中导出。但是,在项目内部,最好仅使用命名出口。
古罗马

7

文档中

命名导出对于导出多个值很有用。在导入过程中,将可以使用相同的名称来引用相应的值。

关于默认导出,每个模块只有一个默认导出。默认导出可以是函数,类,对象或其他任何东西。该值将被视为“主要”导出值,因为它将是最简单的导入方法。


0

当您放置默认值时,其称为默认导出。每个文件只能有一个默认导出,您可以将它导入到任何您想要的名称的文件中。如果不使用默认名称(称为“导出”),则必须使用相同的名称(其中带有花括号)将其导入另一个文件。


0

我遇到的问题是浏览器不使用es6。

我已经解决了:

 <script type="module" src="index.js"></script>

类型模块告诉浏览器使用ES6。

export const bla = [1,2,3];

import {bla} from './example.js';

然后它应该工作。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.