ความแตกต่างระหว่าง const และ const {} ในจาวาสคริปต์คืออะไร

เมื่อฉันศึกษาอิเล็กตรอนฉันพบ 2 วิธีในการรับวัตถุ BrowserWindow

const {BrowserWindow} = require('electron')

และ

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

อะไรคือความแตกต่างระหว่างconstและconst {}ใน JavaScript?

ฉันไม่เข้าใจว่าทำไมถึงใช้const {}งานได้ ฉันพลาดอะไรที่สำคัญเกี่ยวกับ JS หรือไม่?

รหัสสองส่วนมีค่าเท่ากัน แต่ส่วนแรกใช้การกำหนดโครงสร้างการทำลาย 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);

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เพียงแค่ระบุชื่ออย่างถูกต้องสำหรับฟิลด์ที่ต้องการ

นี่เป็นหนึ่งในคุณสมบัติใหม่ใน 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