jaka jest różnica między const a const {} w javascript

Kiedy studiowałem elektron, znalazłem 2 sposoby na uzyskanie obiektu BrowserWindow.

const {BrowserWindow} = require('electron')

i

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

Jaka jest różnica między consti const {}w JavaScript?

Nie rozumiem, dlaczego const {}puszka działa. Czy brakuje mi czegoś ważnego na temat JS?

Te dwa fragmenty kodu są równoważne, ale pierwszy wykorzystuje przypisanie niszczące ES6, aby było krótsze.

Oto krótki przykład tego, jak to działa:

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

Powyższa składnia wykorzystuje ES6. Jeśli masz obiekt zdefiniowany jako:

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

Teraz, jeśli chcemy przypisać lub użyć adresu e-mail i pola tytułu w obj, nie musimy pisać całej składni w ten sposób

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

To jest teraz stara szkoła.

Możemy użyć przypisania niszczącego ES6, tj. Jeśli nasz obiekt zawiera 20 pól w obiekcie obj, to musimy po prostu wpisać nazwy tych pól, których chcemy użyć w następujący sposób:

const { email,title } = obj;

To jest prostsza składnia w ES6. Automatycznie przypisze adres e-mail i tytuł od obj, tylko nazwa musi być poprawnie określona dla wymaganego pola.

To jedna z nowych funkcji w ES6. Zapis w nawiasach klamrowych jest częścią tzw destructuring assignment. Oznacza to, że nie musisz już pobierać samego obiektu i przypisywać zmiennych dla każdej żądanej właściwości w oddzielnych wierszach. Możesz zrobić coś takiego:

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

Jak widać na końcu, funkcjonalność jest taka sama - po prostu uzyskuje się właściwość z obiektu.

Destrukturyzacja przypisania to nie wszystko - całą składnię można sprawdzić w MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destruifying_assignment