у чому різниця між const і const {} у javascript

Question 1

Коли я вивчав електрон, я знайшов 2 способи отримання об'єкта BrowserWindow.

const {BrowserWindow} = require('electron')

і

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

У чому різниця між constі const {}в JavaScript?

Я не можу зрозуміти, чому const {}може працювати. Я сумую за чимось важливим щодо JS?

Question 2

Дві частини коду еквівалентні, але перша використовує призначення деструктуризації ES6 щоб бути коротшим.

Ось короткий приклад того, як це працює:

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

Розгорніть фрагмент

Question 3

const {BrowserWindow} = require('electron')

Вище синтаксис використовує ES6. Якщо у вас є об'єкт, визначений як:

const obj = {
    email: "hello@gmail.com",
    title: "Hello world"
}

Тепер, якщо ми хочемо призначити або використовувати поле електронної пошти та заголовка obj, нам не потрібно писати весь синтаксис як

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

Зараз це стара школа.

Ми можемо використовувати призначення ES6 Destructuring, тобто, якщо наш об'єкт містить 20 полів в об'єкті obj, тоді нам просто потрібно написати імена тих полів, які ми хочемо використовувати так:

const { email,title } = obj;

Це простіший синтаксис ES6. Він автоматично призначить електронну пошту та заголовок obj, лише ім’я має бути правильно вказано для обов’язкового поля.

Question 4

Це одна з нових функцій ES6. Фігурні дужки позначення є частиною так званого destructuring assignment. Це означає, що вам більше не потрібно отримувати сам об’єкт і призначати змінні для кожного властивості, яке ви хочете, в окремих рядках. Ви можете зробити щось на зразок:

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

Розгорніть фрагмент

Як ви вже переконалися, функціональність однакова - просто отримати властивість від об'єкта.

Існує також багато іншого щодо призначення деструктуризації - ви можете перевірити весь синтаксис у MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_ assignment