Export default在导入导出的thing时影响语法，当允许导入任何已导出的东西时，通过选择导入本身的名称，不管导出时的名称是什么，因为它被标记为“default”。

我喜欢(并且使用)的一个有用的用例是允许导出一个匿名函数，而无需显式地命名它，并且只有在导入该函数时，才必须给它一个名称:

例子:

导出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;
}

导入上述函数。为默认名称创建一个名称:

// 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

当使用{}语法导入一个函数(或变量)时，这意味着导入的任何东西在导出时都已经命名，因此必须以完全相同的名称导入它，否则导入将无法工作。

错误的例子:

必须首先导入默认函数 从'./module_1.js导入{divide}， square module_1.js中没有导出Divide_1，因此不会导入任何东西 从'./module_1.js导入{divide_1} 在module_1.js中没有导出Square，因为{}告诉引擎显式地只搜索命名的导出。 从'./module_1.js导入{square}

它是命名导出与默认导出的对比。Export const是一个命名导出，它导出一个或多个const声明。

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

导出(导出默认)

每个文件可以有一个默认导出。当你导入时，你必须指定一个名称并像这样导入:

import MyDefaultExport from "./MyFileWithADefaultExport";

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

命名导出(导出)

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

// 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";

当你输入default时，它被称为default export。每个文件只能有一个默认导出，并且可以使用任何名称将其导入到另一个文件中。当你不放default时，它叫做named export，你必须在另一个文件中导入它，使用相同的名字，里面有花括号。

Export default在导入导出的thing时影响语法，当允许导入任何已导出的东西时，通过选择导入本身的名称，不管导出时的名称是什么，因为它被标记为“default”。

我喜欢(并且使用)的一个有用的用例是允许导出一个匿名函数，而无需显式地命名它，并且只有在导入该函数时，才必须给它一个名称:

例子:

导出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;
}

导入上述函数。为默认名称创建一个名称:

// 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

当使用{}语法导入一个函数(或变量)时，这意味着导入的任何东西在导出时都已经命名，因此必须以完全相同的名称导入它，否则导入将无法工作。

错误的例子:

必须首先导入默认函数 从'./module_1.js导入{divide}， square module_1.js中没有导出Divide_1，因此不会导入任何东西 从'./module_1.js导入{divide_1} 在module_1.js中没有导出Square，因为{}告诉引擎显式地只搜索命名的导出。 从'./module_1.js导入{square}

从文档中可以看到:

命名导出对于导出多个值很有用。在导入过程中，可以使用相同的名称来引用相应的值。 对于默认导出，每个模块只有一个默认导出。默认导出可以是一个函数、一个类、一个对象或任何其他东西。这个值被认为是“主”导出值，因为它是最容易导入的。

注意:请考虑从默认导出导入时，命名是完全独立的。这实际上对重构有影响。

假设你有一个这样的类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'