9

我正在学习 Javascript 导入，但我还不明白我们何时在从另一个 JS 文件导入项目（函数、对象、变量）时使用花括号。

import Search from './models/Search';
import * as searchView from './views/searchView';
import { elements, renderLoader } from './views/base'
//elements is an object, renderLoader is a function
4

8 回答 8

11

import 语句用于从另一个模块导入导出的绑定

花括号 ({}) 用于导入命名绑定，其背后的概念称为解构赋值 解构赋值的概念是一个过程，它可以将数组或对象中的值解压缩到导入模块中的不同变量中

花括号 ({}) 用于导入命名绑定

我想通过一个例子来解释 ES6 中不同类型的导入

假设我们有一个名为 Aninmals(Animals.js) 的模块，假设该模块导出了一个默认绑定Man和其他几个命名绑定，例如Cat，Dog等

/*
 Animal.js
*/
..
export Cat;
export Dog
export default Man

从模块导入单个导出

为了从另一个模块（比如说 Cat）导出单个导出，我们可以这样写

/*
 Anothermodule.js
*/
import {Cat} from "./Animals"

同样对于狗

/*
 YetAnothermodule.js
*/
import {Dog} from "./Animals"

从模块导入多个导出

您还可以导入多个模块，如下所示

/*
 Anothermodule.js
*/
import {Dog, Cat} from "./Animals"

使用更方便的别名导入导出

/*
 Anothermodule.js
*/
import {Dog as Puppy}  from './Animals.js';

在导入期间重命名多个导出

/*
 Anothermodule.js
*/
import {Dog as Puppy, Cat as Kitty}  from './Animals.js';

但是在将 Man 导入另一个模块的情况下，因为它是默认导出，你可以像 thie 一样编写它

/*
 Anothermodule.js
*/
import Man  from './Animals.js';

例如，您还可以混合使用上述两种变体

/*
 Anothermodule.js
*/
import Man, {Dog as Puppy, Cat as Kitty} from '/Animals.js';

导入整个模块的内容

如果要导入可以使用的所有内容

/*
 Anothermodule.js
*/
import * as Animals from './Animals.js';

在这里，访问导出意味着使用模块名称（在本例中为“Animals”）作为命名空间。例如，如果你想在这种情况下使用 Cat 你可以像下面这样使用它

Animals.Cat

您可以在此处阅读有关导入的更多信息

您可以在此处阅读有关解构的信息

于 2018-08-06T05:35:41.123 回答
4 
import { elements, renderLoader } from './views/base'

是您需要从模块导入单个命名导出的方式，在这种情况下，它是导入命名导出 elements和renderLoaderfrom base.js.

在许多情况下，{ elements, renderLoader }语法只是在 ECMAScript 标准的最新版本中添加的语法糖（称为解构）。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

但是，在这种情况下，只需要获取您想要的命名导出。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_single_export_from_a_module

请注意，您还可以为变量选择新名称，如下所示：

import { elements as newNameForElements, renderLoader as newNameForRenderLoader } from './views/base'

这将使elements出口可用newNameForElements等。

于 2018-08-06T05:44:37.897 回答
3 
import Search from './models/Search';

将默认导出元素导入为Search.

import * as searchView from './views/searchView';

将所有searchView已导出的内容导入其中。

import { elements, renderLoader } from './views/base'

导入精选数量的命名导出元素。

于 2018-08-06T05:37:38.450 回答
2

{} 在您想要导入对象的一部分时使用。* as searchView 之一将导入 searchView 文件中的所有属性和方法。

假设 './views/base' 有 3 个属性：elements、renderLoader、additionalParam（假设这三个属性都已导出为文件中的命名导出）

做的时候

import { elements, renderLoader } from './views/base'

您只导入这 2 个特定属性

但是当你这样做时

import * as base from './views/base'

您在名为 base 的对象中导入所有三个属性

于 2018-08-06T05:36:58.403 回答
1

举个例子：

要导入的文件，比如importFile.js：

var defaultExport, otherExport1, otherExport2, otherExport3;

export default defaultExport = () => {
    console.log("Default Export")
}

export otherExport1 = "Other non-default Export";

export otherExport2 = function() {
  console.log("Some more non-default Export");
};

export otherExport3 = { msg: "again non-default Export" };

现在在您的主 JS 文件中，如果您要执行以下操作：

import something from './importedFile.js;

在这里，变量something将获取已在importedFile.js文件中默认导出的变量/函数的值，即变量defaultExport。现在，如果您执行以下操作：

import { otherExport1, otherExport2 } from './importedFile.js;

它将专门导入变量otherExport1和otherExport2函数，而不是defaultExportand otherExport3。

您还可以执行以下操作，以从 importsFile.js 中按名称导入所有变量：

import { defaultExport, otherExport1, otherExport2, otherExport3 } from './importedFile.js';

结论：

  1. 花括号用于选择需要导入的变量/函数/对象（使用 ES6 中称为对象解构的技术），而无需导入所有其他不必要的导出变量/函数/对象。
  2. 如果您不指定花括号，它将始终只导入已导出为默认值的变量/函数/对象，而不会导入其他任何内容。如果没有将任何内容导出为默认导出，它将导入未定义。
于 2018-08-06T08:23:48.033 回答
0

您可以使用花括号从另一个模块函数或对象等隐式和选择性地导入。

// import implicitly one function and one constant from example.js
import { a, b } from 'example'

例子.js

// export a and b but kept c private to example.js
export const a => { ... }
export const b = "hello"
const c = "private, not visible to the outside"

更多信息： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

于 2018-08-06T05:35:10.207 回答
0

如果某些内容默认导出，则导入时不带花括号。

如果导出多个变量，则使用花括号导入。

例如，

在 somefunction.js 中

export default module;

import module from './somefunction.js';

在 someOtherFunction.js

export func1;

export func2;

import { func1, func2 }  from './someOtherFunction.js'
于 2018-08-06T05:38:01.770 回答
0

您可以从单个模块导出多个内容。

例如在您的代码中：

import * as searchView from './views/searchView'; //1
import { elements, renderLoader } from './views/base' //2

在，//1您从'./views/searchView';

在//2, 可能有更多内容来自, 但您只'./views/base'导入 elements and renderLoader

更多信息：导入 MDN

于 2018-08-06T05:40:53.577 回答