sự khác biệt giữa const và const {} trong javascript là gì

Khi tôi nghiên cứu về electron, tôi tìm thấy 2 cách để lấy đối tượng BrowserWindow.

const {BrowserWindow} = require('electron')

và

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

Sự khác biệt giữa JavaScript constvà const {}trong JavaScript là gì?

Tôi không thể hiểu tại sao const {}có thể hoạt động. Tôi có bỏ lỡ điều gì quan trọng về JS không?

Hai đoạn mã tương đương nhau nhưng đoạn mã đầu tiên sử dụng phép gán hủy cấu trúc ES6 sẽ ngắn hơn.

Đây là một ví dụ nhanh về cách nó hoạt động:

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

Cú pháp trên sử dụng ES6. Nếu bạn có một đối tượng được xác định là:

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

Bây giờ nếu chúng ta muốn gán hoặc sử dụng email và trường tiêu đề của obj thì chúng ta không cần phải viết toàn bộ cú pháp như

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

Đây là trường cũ bây giờ.

Chúng ta có thể sử dụng phép gán hủy cấu trúc ES6 , tức là nếu đối tượng của chúng ta chứa 20 trường trong đối tượng obj thì chúng ta chỉ cần viết tên của những trường mà chúng ta muốn sử dụng như sau:

const { email,title } = obj;

Đây là cú pháp đơn giản hơn của ES6. Nó sẽ tự động gán email và tiêu đề từ đó obj, chỉ cần nêu chính xác tên cho trường bắt buộc.

Đây là một trong những tính năng mới trong ES6. Ký hiệu dấu ngoặc nhọn là một phần của cái gọi là destructuring assignment. Điều này có nghĩa là, bạn không còn phải lấy chính đối tượng và gán các biến cho từng thuộc tính bạn muốn trên các dòng riêng biệt. Bạn có thể làm điều gì đó như:

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

Như bạn đã thấy ở phần cuối, chức năng giống nhau - chỉ đơn giản là lấy một thuộc tính từ một đối tượng.

Ngoài ra còn có nhiều hơn nữa để chuyển nhượng cơ cấu lại - bạn có thể kiểm tra toàn bộ cú pháp trong MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destosystem_assignment