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

Question 1

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?

Question 2

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

Rozwiń fragment

Question 3

const {BrowserWindow} = require('electron')

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

const obj = {
    email: "hello@gmail.com",
    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.

Question 4

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

Rozwiń fragment

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