一起再看JavaScript中的物件解構

解構是一個概念，分解其中一種資料類型並將其單獨的屬性分配給變量，在文章《JavaScript 解構賦值5 個常見場景和實例》中介紹過，今天再來複習一下。

基礎解構

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, lastName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(lastName); // Tang

正如上面的程式碼片段中所看到的那樣，在解構語法中，分解了firstName 物件屬性並將其分配給表達式左側定義的變數。在上述場景中，物件的屬性名稱應與左側表​​達式中定義的變數相符。如果定義其他變數名稱，則取得不到想要的值，如：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, trueName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(trueName); // undefined

由於在fullName 中沒有屬性trueName ，所以它被初始化為undefined。

別名解構

如果需要把物件屬性賦值給屬性名不一致的變數名，可以如下程式碼來實作：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang

預設值解構

#在上面程式碼中有看到，物件中不存在特定屬性的解構，一般會賦值為undefined ，如果不希望是undefined ，可以為其設定預設值，如下：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 18

下面來看下存在age 屬性下的結果：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 30

REST解構

如果想要從一個物件解構一個屬性，剩下的屬性結構為另一個變量，如下：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { age, ...username } = fullName; // 解构语法
console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }
console.log(age); // 30

在上面的程式碼片段中，將username 屬性分配給了一個變量，並使用了rest 運算子(...) 將變數的其餘部屬性指派給了一個單獨的物件。

推薦學習：《JavaScript影片教學》

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