JavaScript 物件解構

解構物件

像解構數組一樣，解構物件可以幫助您並使您的程式碼更乾淨、更好，但它與解構數組不同，以下是具體操作方法：

• 首先，為了整個解釋，我們需要這個對象，我用海綿鮑勃來比喻這個對象??，所以看一下它並稍微分析一下：

let heightInCm = 4;
const obj = {
  personName: 'spongeBob',
  personAge: 37,
  personAddress: '124 Conch Street, Bikini Bottom, Pacific Ocean',
  heightInCm: 10,
  personHobbies: [
    'Jellyfishing',
    'Cooking Krabby Patties',
    'Blowing Bubbles',
    'Karate',
  ],
  home: {
    type: 'pineapple',
    location: 'bikini bottom',
    details: {
      rooms: 3,
      uniqueFeature: "it's underwater and shaped like a pineapple!",
    },
  },
};

• 現在，讓我們從物件中析構兩個屬性：

const { personName, personAge } = obj;
console.log(personName, personAge); // spongeBob 37

• 如您所見，要破壞一個對象，您必須使用 {花括號}，然後在其中寫入與我們要在對像中檢索的屬性名稱完全相同的變數名稱。

*您也可以讓變數名稱與屬性名稱不同，只需將新變數名稱放在冒號後面：

const { personName: name, personAge: age } = obj;
console.log(name, age); // spongeBob 37

• 如您所見，我們將 personName 更改為姓名，並將 personAge 更改為年齡。

*預設值：

• 我們也可以設定預設值，以防當我們嘗試存取物件中不存在的屬性時，例如：

const { DriversLicense = ['no'] } = obj;
console.log(DriversLicense);  // ['no']
// DriversLicense does not exist in obj, so the default value will be used.

* 解構物件時改變變數：

({ heightInCm } = obj);
console.log(heightInCm); // 10

• 在這個例子中，如果你回頭看，你會發現物件外部的heightInCm = 4，我們想要將物件內部的值賦給外部的heightInCm，所以我們像普通解構一樣進行，但是JavaScript 期望在函數外部以{ } 開頭時是一個程式碼區塊，因此我們將語句括在括號中以使其有效。

*嵌套物件解構：

// firstway:  Extracting the Entire Nested Object 

const { details } = obj.home;
console.log(details); // { rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// second way: Extracting Specific Properties
const {
  home: { details }} = obj;

console.log(details); // {rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// third way
const {details: { rooms, uniqueFeature }} = obj.home;

console.log(rooms, uniqueFeature); // 3 "it's underwater and shaped like a pineapple!"

• 最適合清晰度：當您處理較大的物件並且喜歡透過先提取整個物件來保持事物清晰時，第一種方法可能會更好。
• 最適合效率：如果您只對深度嵌套物件的特定屬性感興趣，那麼第三種方法通常是最好的。它簡潔並避免創建不必要的變數。

*感謝您的閱讀，希望您明白一切，如果您有任何疑問，請隨時提問？

以上是JavaScript 物件解構的詳細內容。更多資訊請關注PHP中文網其他相關文章！