quelle est la différence entre const et const {} en javascript


100

Quand j'étudie l'électron, 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 constet const {}dans JavaScript?

Je ne peux pas comprendre pourquoi ça const {}marche. Est-ce que je manque quelque chose d'important à propos de JS?

Réponses:


158

Les deux morceaux de code sont équivalents mais le premier utilise l' affectation de déstructuration ES6 pour être plus courte.

Voici un exemple rapide de son fonctionnement:

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


Votre réponse est utile. J'ai trouvé le site Web des développeurs Mozilla très difficile à comprendre. Merci.
DavidHyogo

27
const {BrowserWindow} = require('electron')

La syntaxe ci-dessus utilise 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 champ email et title de obj, nous n'avons pas à écrire toute la syntaxe comme

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

C'est la vieille école maintenant.

Nous pouvons utiliser l' affectation de destruction ES6 , c'est-à-dire que si notre objet contient 20 champs dans l'objet obj, nous devons simplement écrire les noms de ces champs que nous voulons utiliser comme ceci:

const { email,title } = obj;

Il s'agit de la syntaxe ES6 plus simple. Elle attribuera automatiquement l'adresse e-mail et le titre de obj, juste le nom doit être correctement indiqué pour le champ obligatoire.


18

C'est l'une des nouvelles fonctionnalités d'ES6. La notation entre accolades fait partie de ce qu'on appelle destructuring assignment. Cela signifie que vous n'avez plus besoin d'obtenir l'objet lui-même et d'affecter des variables pour chaque propriété que vous souhaitez sur des lignes distinctes. 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, la fonctionnalité est la même - il suffit d'obtenir une propriété à partir d'un objet.

Il y a aussi plus à l'affectation de déstructuration - vous pouvez vérifier la syntaxe entière dans MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.