问答中心分类: JAVASCRIPT我应该在什么时候为ES6导入使用花括号?
0
匿名用户 提问 1月 前

这似乎很明显,但我发现自己对何时在ES6中使用大括号导入单个模块有点困惑。例如,在我正在处理的React Native项目中,我有以下文件及其内容:
文件初始状态。js公司

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

在TodoReducer中。js,我必须不带花括号地导入它:

import initialState from './todoInitialState';

如果我附上initialState在花括号中,以下代码行出现以下错误:

无法读取未定义的属性todo

文件TodoReducer。js公司:

export default function todos(state = initialState.todo, action) {
    // ...
}

类似的错误也发生在我的带有花括号的组件上。我想知道什么时候应该在单个导入中使用大括号,因为显然,在导入多个组件/模块时,必须将它们括在大括号中,我知道这一点。
位于的堆栈溢出柱在这里没有回答我的问题,而是我在问什么时候我应该或不应该使用大括号来导入仅有一个的或者我不应该在ES6中使用花括号来导入单个模块(显然不是这样,因为我已经看到需要花括号的单个导入)。

10 Answers
0
prosti 回答 1月 前

我要说的是,还有一个星号表示importES6关键词值得一提。
在此处输入图像描述
如果您尝试控制台日志混合:

import * as Mix from "./A";
console.log(Mix);

您将获得:
在此处输入图像描述

我应该在什么时候为ES6导入使用花括号?

当您只需要模块中的特定组件时,括号是金色的,这使得像webpack这样的捆绑产品占用的空间更小。

Shafizadeh 回复 1月 前

import * as Mix from "./A";import A as Mix from "./A";相同的?

Peter Mortensen 回复 1月 前

你说的是什么意思“星号符号”?通配符?

prosti 回复 1月 前

@彼得·莫滕森(PeterMortensen)的“明星”一词,我相信我用的是“*”自由字典。com/星号星号。那是三年前的事了,但我想是这样的。

Carmine Tambascia 回复 1月 前

@PeterMortensen星号表示使用开始符号,并从该文件/模块导入所有内容

Shubham Singhvi 回复 1月 前

@Alireza我试过导入const Imex = <div>Hello</div> console.log(a);import Imex from "./Import";在返回声明中<Imex />显示错误和{Imex}运行完美?

0
Deepak Sharma 回答 1月 前

丹·阿布拉莫夫的回答解释默认导出命名导出.
使用哪个?
引用David Herman的话:ECMAScript 6支持单/默认导出样式,并为导入默认值提供最甜美的语法。导入命名导出可以甚至应该稍微不那么简洁。
然而,在TypeScript中,由于重构,名为export的脚本更受欢迎。例如,如果默认导出一个类并将其重命名,则类名将仅在该文件中更改,而不会在其他引用中更改,使用命名导出时,将在所有引用中重命名类名。
整体使用你喜欢的任何东西。
附加的
默认导出实际上是名为Default的命名导出,因此默认导出可以导入为:

import {default as Sample} from '../Sample.js';
PGT 回复 1月 前

这个Additional线路是很好的信息。import A from './A'如果导出时未定义以下名称,则没有意义export default 42.

Bergi 回复 1月 前

请确保不要误解大卫·赫尔曼的话。这并不意味着“有利于总是在ES6中使用单一/默认导出“,但更确切地说”由于单一导出非常常见,ES6对默认值的支持最好,我们为它们提供了最甜美的语法“.

0
Brandon 回答 1月 前

如果你想到import作为节点的语法糖。js模块、对象和解构,我觉得这很直观。

// bar.js
module = {};

module.exports = {
  functionA: () => {},
  functionB: ()=> {}
};

 // Really all that is is this:
 var module = {
   exports: {
      functionA, functionB
   }
  };

// Then, over in foo.js

// The whole exported object:
var fump = require('./bar.js'); //= { functionA, functionB }
// Or
import fump from './bar' // The same thing - object functionA and functionB properties


// Just one property of the object
var fump = require('./bar.js').functionA;

// Same as this, right?
var fump = { functionA, functionB }.functionA;

// And if we use ES6 destructuring:
var { functionA } =  { functionA, functionB };
// We get same result

// So, in import syntax:
import { functionA } from './bar';
0
Willem van der Veen 回答 1月 前

总结ES6模块:
出口:
您有两种类型的导出:

  1. 命名导出
  2. 默认导出,每个模块最多一个

语法:

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

进口:
这个出口类型(即命名或默认导出)影响如何导入内容:

  1. 对于命名导出,我们必须使用花括号和确切名称作为导出的声明(即变量、函数或类)。
  2. 对于默认导出,我们可以选择名称。

语法:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // For our named imports

// Syntax single named import:
// import { importantData_1 }

// For our default export (foo), the name choice is arbitrary
import ourFunction from './A';

感兴趣的事物:

  1. 在大括号内使用逗号分隔的列表匹配的名称指定导出的导出。
  2. 使用您选择的不带花括号的名称作为默认导出。

别名:
无论何时,只要您想重命名命名导入,都可以通过别名. 其语法如下:

import { importantData_1 as myData } from './A';

现在我们已经进口了importantData_1,但标识符为myData而不是importantData_1.

0
theTypan 回答 1月 前

为了了解花括号在import陈述,首先,你必须理解解构介绍于ES6

  1. 对象分解
    var bodyBuilder = {
      firstname: 'Kai',
      lastname: 'Greene',
      nickname: 'The Predator'
    };
    
    var {firstname, lastname} = bodyBuilder;
    console.log(firstname, lastname); // Kai Greene
    
    firstname = 'Morgan';
    lastname = 'Aste';
    
    console.log(firstname, lastname); // Morgan Aste
  2. 阵列分解
    var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
    
    console.log(firstGame); // Gran Turismo

    使用列表匹配

    var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
      console.log(secondGame); // Burnout

    使用扩展运算符

    var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
    console.log(firstGame);// Gran Turismo
    console.log(rest);// ['Burnout', 'GTA'];

现在我们已经解决了这个问题ES6您可以导出多个模块。然后可以使用如下所示的对象分解。
假设您有一个名为module.js

export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

您想将导出的函数导入到index.js;

import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

您也可以使用不同的变量名,如

import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');
Adam Moisa 回复 1月 前

由于您正在展示与分解的比较,我将在您最后的评论中添加等效的分解比较:import {printFirstname as pFname, printLastname as pLname} from './module.js'相当于:var foo = {printFirstname: 'p_f_n', printLastname: 'p_l_n'}; var { printFirstname:pFname, printLastname: pLname } = foo; pFname('Taylor'); pLname('Swift');

Tushar Pandey 回复 1月 前

健身爱好者?

theTypan 回复 1月 前

@TusharPandey我是一名健美运动员

Eric Bishard 回复 1月 前

我认为在任何关于导入和何时使用卷曲和不使用卷曲的解释中,如果你没有提到物体破坏,你真的没有给出最好的解释。一旦我学会了解构,我从来没有想过为什么我会再使用卷发,这只是直觉上有道理。

KawaiKx 回复 1月 前

import语句中的花括号与分解无关。分解并不适用于函数。然而,我们在导入函数(如果不是默认导出)的import语句中使用花括号。