qual é a diferença entre const e const {} em javascript

99

Quando estudo o elétron, encontrei 2 maneiras de obter o objeto BrowserWindow.

const {BrowserWindow} = require('electron')

e

const electron = require('electron')
const BrowserWindow = electron.BrowserWindow

Qual é a diferença entre conste const {}em JavaScript?

Não consigo entender por que const {}pode funcionar. Sinto falta de algo importante sobre JS?

Kevin00000000
fonte

Respostas:

158

As duas partes do código são equivalentes, mas a primeira está usando a atribuição de desestruturação ES6 para ser mais curta.

Aqui está um exemplo rápido de como funciona:

const obj = {
  name: "Fred",
  age: 42,
  id: 1
}

//simple destructuring
const { name } = obj;
console.log("name", name);

//assigning multiple variables at one time
const { age, id } = obj;
console.log("age", age);
console.log("id", id);

//using different names for the properties
const { name: personName } = obj;
console.log("personName", personName);

VLAZ
fonte
Sua resposta é útil. Achei o site do desenvolvedor Mozilla muito difícil de entender. Obrigado.
DavidHyogo
27
const {BrowserWindow} = require('electron')

A sintaxe acima usa ES6. Se você tiver um objeto definido como:

const obj = {
    email: "[email protected]",
    title: "Hello world"
}

Agora, se quisermos atribuir ou usar e-mail e campo de título de obj, então não temos que escrever toda a sintaxe como

const email = obj.email;
const title = obj.title;

Esta é a velha escola agora.

Podemos usar a atribuição de Destructuring ES6 , ou seja, se nosso objeto contém 20 campos no objeto obj, então temos apenas que escrever os nomes dos campos que queremos usar assim:

const { email,title } = obj;

Esta é a sintaxe ES6 mais simples. Ele atribuirá automaticamente o e-mail e o título de obj, apenas o nome deve ser indicado corretamente para o campo obrigatório.

Gaurav Sachdeva
fonte
18

Este é um dos novos recursos do ES6. A notação de chaves é uma parte do assim chamado destructuring assignment. O que isso significa é que você não precisa mais obter o próprio objeto e atribuir variáveis ​​para cada propriedade desejada em linhas separadas. Você pode fazer algo como:

const obj = {
  prop1: 1,
  prop2: 2
}

// previously you would need to do something like this:
const firstProp = obj.prop1;
const secondProp = obj.prop2;
console.log(firstProp, secondProp);
// etc.

// however now you can do this on the same line:
const {prop1, prop2} = obj;
console.log(prop1, prop2);

Como você viu no final, a funcionalidade é a mesma - simplesmente obter uma propriedade de um objeto.

Também há mais na atribuição de desestruturação - você pode verificar toda a sintaxe no MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Vasil Dininski
fonte