我们啥时候在javascript导入中使用''？ [复制]
Posted
技术标签:
【中文标题】我们啥时候在javascript导入中使用\'\'？ [复制]【英文标题】：When do we use ' ' in javascript imports? [duplicate]我们什么时候在javascript导入中使用''？ [复制] 【发布时间】：2019-01-13 00:35:22 【问题描述】：我正在学习 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
【问题讨论】：
取决于导出的内容 - 您自己的问题有 2 个不使用exports，如果一个或默认，则不需要使用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
您可以阅读有关导入here的更多信息
你可以阅读解构here
【讨论】：
【参考方案2】：举个例子：
要导入的文件，比如 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" ;
现在在您的主 JS 文件中，如果您要执行以下操作：
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';
结论：
花括号用于选择需要导入的变量/函数/对象（使用 ES6 中称为 对象解构 的技术），而无需导入所有其他不必要的导出变量/函数/对象。 如果您不指定花括号，它将始终只导入已作为默认值导出的变量/函数/对象，而不会导入其他任何内容。如果没有任何内容被导出为默认导出，它将导入 undefined。
【讨论】：
【参考方案3】：import elements, renderLoader from './views/base'
是您需要从模块导入单个命名导出的方式，在这种情况下，它是从 base.js 导入 命名导出 elements 和 renderLoader。
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 等。
【讨论】：
这完全不正确！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'.
@UtkarshPramodGupta 感谢您的提醒。你是完全正确的，我试图删除我的答案（这是不可能的，因为它是公认的答案），所以我相应地更正了我的答案。请重新检查并重新考虑您的反对意见。
我做了 :) 请注意我的回答，以了解更多关于 ES6 中的导出和导入的说明。【参考方案4】：
您可以从单个模块中导出多个内容。
例如在您的代码中：
import * as searchView from './views/searchView'; //1
import elements, renderLoader from './views/base' //2
在//1，您从'./views/searchView'; 导入Everything
在//2，可能有更多来自'./views/base' 的内容，但您只导入 elements and renderLoader
欲了解更多信息：import MDN
【讨论】：
【参考方案5】：如果默认导出某些内容，则导入时不带花括号。
如果导出多个变量，则使用花括号导入。
例如，
在 somefunction.js 中
export default module;
import module from './somefunction.js';
在 someOtherFunction.js 中
export func1;
export func2;
import func1, func2 from './someOtherFunction.js'
【讨论】：
【参考方案6】：import Search from './models/Search';
将默认导出元素导入为Search。
import * as searchView from './views/searchView';
将所有内容导入已导出的searchView。
import elements, renderLoader from './views/base'
导入精选数量的命名导出元素。
【讨论】：
【参考方案7】：在您想要导入对象的一部分时使用。 * as searchView 之一将导入 searchView 文件中的所有属性和方法。
假设 './views/base' 有 3 个属性：elements、renderLoader、additionalParam（假设这三个属性都已导出为文件中的命名导出）
什么时候做
import elements, renderLoader from './views/base'
您只导入这 2 个特定属性
但是当你这样做时
import * as base from './views/base'
您在名为 base 的对象中导入所有三个属性
【讨论】：
【参考方案8】：您可以使用花括号隐式并有选择地从另一个模块函数或对象等导入。
// 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/import
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
【讨论】：
以上是关于我们啥时候在javascript导入中使用''？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章