再談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
           

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