Quelle est la difference entre const et const {} en javascript

Question

Quand j'étudie electron, j'ai trouvé 2 façons d'obtenir un objet BrowserWindow.

 const {BrowserWindow} = require('electron')
 

et

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

Quelle est la différence entre const et const {} en JavaScript?

Je ne comprends pas pourquoi les const {} peuvent fonctionner. Est-ce que je manque quelque chose d'important à propos de JS?

Answer 1

Les deux morceaux de code sont équivalents, mais le premier est l'aide de l' ES6 déstructuration affectation à être plus courte.

Voici un exemple rapide de la façon dont il fonctionne:

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);

Answer 2

const {BrowserWindow} = require('electron')

Syntaxe ci-dessus utilise l'ES6. Si vous avez un objet défini comme:

const obj = {
    email: "hello@gmail.com",
    title: "Hello world"
}

Maintenant, si nous voulons attribuer ou utiliser le courrier électronique et le champ titre de l'obj alors nous n'avons pas d'écrire la totalité de la syntaxe comme

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

C'est de la vieille école maintenant.

Nous pouvons utiliser ES6 Déstructuration d'affectation c'est à dire, si notre objet contient 20 champs dans l'objet obj ensuite, nous avons juste à écrire les noms de ces champs où l'on veut utiliser comme ceci:

const { email,title } = obj;

C'est ES6 syntaxe plus simple Il assignera automatiquement par courriel et le titre d' obj, juste le nom doit être mentionné correctement de terrain.

Answer 3

C'est l'une des nouvelles fonctionnalités dans l'ES6. Les accolades notation est une partie de la soi-disant destructuring assignment. Ce que cela signifie, c'est que, vous n'avez plus à obtenir l'objet lui-même et variables à affecter pour chaque propriété que vous souhaitez sur des lignes séparées. Vous pouvez faire quelque chose comme:

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);

Comme vous l'avez vu à la fin de la fonctionnalité est la même - simplement obtention d'une propriété d'un objet.

Il y a aussi plus de déstructuration de cession - vous pouvez consulter l'ensemble de la syntaxe dans MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment