我正在学习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
导入语句用于从其他模块导入已导出绑定
花括号({})用于导入具名绑定，背后的概念被称为解构赋值。解构赋值是一种将数组或对象中的值解包成导入模块中不同变量的过程
花括号({})用于导入具名绑定
我想通过一个例子来解释ES6中不同类型的导入
假设我们有一个名为Animals(Animals.js)的模块，该模块导出一个默认绑定Man和几个其他具名绑定，如Cat、Dog等
/*
Animals.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';
在这里，访问exports意味着使用模块名称（在本例中为“Animals”）作为命名空间。例如，如果您想在此情况下使用Cat，可以像下面这样使用它
Animals.Cat
关于导入，您可以在此处阅读更多信息。
关于解构，您可以在此处阅读更多信息。
Man 使用别名，例如： import SuperMan from 'Animals.js'。 - starrietas 而是使用 import { module: myModuleName } from ...。 - connexoimport { elements, renderLoader } from './views/base'
这是从模块中导入单个命名导出的方式，在本例中，它从base.js导入了命名导出的elements和renderLoader。
{ elements, renderLoader }语法在许多情况下只是ECMAScript标准最近添加的语法糖（称为解构）。
但在这种情况下，仅获取所需的命名导出是必要的。
请注意，您也可以像这样为变量选择新名称：
import { elements as newNameForElements, renderLoader as newNameForRenderLoader } from './views/base'
这将使elements的导出可用作newNameForElements等。
import {elements, renderLoader} from './views/base'与import elements from './views/base'; import renderLoader from './views/base'不同。如果你没有默认导出elements或者renderLoader，那么在第二种情况下两个变量都将是undefined。你必须使用花括号正确地引入它们，像这样：import {elements} from './views/base'; import {renderLoader} from './views/base'。 - UtkarshPramodGuptaimport Search from './models/Search';
将默认导出的元素作为Search导入。
import * as searchView from './views/searchView';
searchView中。import { elements, renderLoader } from './views/base'
导入手动挑选的一些具有名字的导出元素。
当您想要导入对象的一部分时，可以使用{}。作为searchView one的*将导入searchView文件中的所有属性和方法。
假设'./views/base'有3个属性：elements，renderLoader，additionalParam（假设所有三个都已在文件中作为命名导出导出）
进行以下操作时
import { elements, renderLoader } from './views/base'
你只需要导入这两个特定的属性
但是当你这样做时
import * as base from './views/base'
你需要在名为base的对象中导入这三个属性
请看下面的例子：
要导入的文件名为，例如 importedFile.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" };
import something from './importedFile.js;
在这里，变量something将获得作为默认导出的变量/函数的值，该变量/函数在importedFile.js文件中被导出，即变量defaultExport。现在，如果您执行以下操作：
import { otherExport1, otherExport2 } from './importedFile.js;
它会具体导入otherExport1和otherExport2变量和函数，而不是defaultExport和otherExport3。
您还可以执行以下操作，按其名称从importedFile.js导入所有变量：
import { defaultExport, otherExport1, otherExport2, otherExport3 } from './importedFile.js';
你可以使用花括号从另一个模块中隐式地选择性地导入函数、对象等。
// import implicitly one function and one constant from example.js
import { a, b } from 'example'
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/export
export default module;
import module from './somefunction.js';
在 someOtherFunction.js 中
export func1;
export func2;
import { func1, func2 } from './someOtherFunction.js'
您可以从单个模块中导出多个内容。
例如，在您的代码中：
import * as searchView from './views/searchView'; //1
import { elements, renderLoader } from './views/base' //2
在//1处，您从'./views/searchView'导入Everything
在//2处，可能会有更多来自'./views/base'的内容，但您只导入elements和renderLoader
更多信息请参见：导入MDN
{}- 因此，您的问题根本不清楚 - 这里有一些有用的文档。 - Jaromanda Xexports，如果只有一个或默认值，则不需要使用{}。否则，如果源对象具有多个，则可以指定{}并选择要使用的内容。 - vikscool