web-dev-qa-db-fra.com

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

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 le const {} peut fonctionner. Est-ce que je manque quelque chose d'important à propos de JS?

javascriptnode.jselectron
72
Kevin00000000

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

Voici un exemple rapide de la façon dont cela 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);
116
VLAZ
const {BrowserWindow} = require('electron')

La syntaxe ci-dessus utilise ES6. Si vous avez un objet défini comme:

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

Maintenant, si nous voulons assigner ou utiliser les champs email et title de obj, nous n’avons pas à écrire la syntaxe complète comme

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

C'est la vieille école maintenant.

Nous pouvons utiliser ES6 Destructuring assignation, c'est-à-dire, si notre objet contient 20 champs dans l'objet obj, il suffit d'écrire les noms des champs que nous souhaitons utiliser comme ceci:

const { email,title } = obj;

Ceci est la syntaxe plus simple de l'ES6 Il affectera automatiquement le courrier électronique et le titre de obj, mais le nom doit être correctement indiqué pour le champ requis.

20
Gaurav Sachdeva

C'est l'une des nouvelles fonctionnalités de ES6. La notation entre accolades fait partie de la soi-disant 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é de votre choix 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: obtenir simplement une propriété d'un objet.

Il y a aussi d'autres tâches à effectuer dans la déstructuration - vous pouvez vérifier la syntaxe complète dans MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

14
Vasil Dininski