ES6 中的“导出默认值”与“导出默认值”例:
2022-08-30 00:02:56
我试图确定这两者之间是否存在任何重大差异,除了能够通过以下操作导入:export default
import myItem from 'myItem';
使用我可以做到:export const
import { myItem } from 'myItem';
除此之外,是否有任何差异和/或用例?
我试图确定这两者之间是否存在任何重大差异,除了能够通过以下操作导入:export default
import myItem from 'myItem';
使用我可以做到:export const
import { myItem } from 'myItem';
除此之外,是否有任何差异和/或用例?
这是命名导出与默认导出。 是导出一个或多个 const 声明的命名导出。export 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";
导出默认值
会影响导入导出的“事物”时的语法,允许导入时,通过选择本身的名称,无论导出时的名称是什么,只要它被标记为“默认”。import
我喜欢(并使用)的一个有用的用例是允许导出匿名函数而无需显式命名它,并且只有在导入该函数时,才必须为其命名:
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
当语法用于导入函数(或变量)时,这意味着导入的任何内容在导出时都已命名,因此必须以完全相同的名称导入它,否则导入将不起作用。{}
默认函数必须首先导入
import {divide}, square from './module_1.js
divide_1
中未导出,因此不会导入任何内容module_1.js
import {divide_1} from './module_1.js
square
中没有导出,因为告诉引擎只显式搜索命名导出。module_1.js
{}
import {square} from './module_1.js