我们什么时候在JavaScript导入中使用 '{ }' ？[重复]

Question

我正在学习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

Answer 1

import Search from './models/Search';

将默认导出的元素导入为搜索。

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

将已导出的所有内容导入search chView。

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

导入手动拾取的命名导出元素数。

Answer 2

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

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

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

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

不过，在这种情况下，只需要获取所需的命名导出。

html" target="_blank">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'

这将使元素导出可用为newNameForElements等。

Answer 3

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

花括号（{}）用于导入命名绑定，其背后的概念称为析构赋值析构赋值的概念是一个过程，它使从数组或对象中解包到导入模块中的不同变量中成为可能

大括号（{}）用于导入命名绑定

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

假设我们有一个名为Animals（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导入另一个模块的情况下，因为它是默认的导出，所以您可以像这样编写它

/*
 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';

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

Animals.Cat

你可以在这里阅读更多关于导入的信息

你可以在这里读到关于破坏的内容