在ES6中，`export const`和`export default`的区别

33 浏览
0 Comments

在ES6中，`export const`和`export default`的区别

我正在努力确定这两者之间是否存在大的区别，除了能够通过只需执行export default导入：

import myItem from 'myItem';

和使用export const我可以这样做：

import { myItem } from 'myItem';

除此之外还有什么区别和/或用例吗？

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

export default会影响导入所导出"thing"的语法，当导入时，在import中选择名称导入导出的任何东西，无论其导出时的名称是什么，因为它被标记为“默认值”。

我喜欢（并使用）的一个有用的用例是，允许导出一个匿名函数，而不必明确命名它，仅在该函数被导入时，必须给它一个名称：

Example:

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

0
0 Comments

这是一个命名导出与默认导出的区别。 export const是一个命名导出，可以导出一个或多个const声明。

需要强调的是：export关键字是关键，const用于声明一个或多个const声明。 export也可以应用于其他声明，如类或函数声明。

默认导出（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";

注：该段文本中的HTML标签不需要翻译，仅对文本内容进行翻译。

0