Was ist der Unterschied zwischen const und const {} in Javascript?

Beim Studium von Elektronen habe ich zwei Möglichkeiten gefunden, um ein BrowserWindow-Objekt zu erhalten.

const {BrowserWindow} = require('electron')

und

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

Was ist der Unterschied zwischen constund const {}in JavaScript?

Ich kann nicht verstehen, warum das const {}funktionieren kann. Vermisse ich etwas Wichtiges an JS?

Die beiden Codeteile sind äquivalent, aber der erste verwendet die ES6-Destrukturierungszuweisung , um kürzer zu sein.

Hier ist ein kurzes Beispiel, wie es funktioniert:

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

const {BrowserWindow} = require('electron')

Die obige Syntax verwendet ES6. Wenn Sie ein Objekt definiert haben als:

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

Wenn wir nun das E-Mail- und Titelfeld von obj zuweisen oder verwenden möchten, müssen wir nicht die gesamte Syntax wie folgt schreiben

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

Das ist jetzt alte Schule.

Wir können die ES6-Destrukturierungszuweisung verwenden, dh wenn unser Objekt 20 Felder im Objekt obj enthält, müssen wir nur die Namen der Felder schreiben, die wir wie folgt verwenden möchten:

const { email,title } = obj;

Dies ist eine einfachere ES6-Syntax. Sie weist automatisch E-Mail und Titel von zu obj. Der Name muss für das erforderliche Feld korrekt angegeben werden.

Dies ist eine der neuen Funktionen in ES6. Die Notation der geschweiften Klammern ist Teil der sogenannten destructuring assignment. Dies bedeutet, dass Sie das Objekt nicht mehr selbst abrufen und Variablen für jede gewünschte Eigenschaft in separaten Zeilen zuweisen müssen. Sie können so etwas tun wie:

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

Wie Sie am Ende gesehen haben, ist die Funktionalität dieselbe - einfach eine Eigenschaft von einem Objekt abrufen.

Die Destrukturierungszuweisung bietet noch mehr: Sie können die gesamte Syntax in MDN überprüfen: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment