JavaScript中的對象解構方法怎么使用

這篇文章主要介紹“JavaScript中的對象解構方法怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript中的對象解構方法怎么使用”文章能幫助大家解決問題。

基礎解構

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中的對象解構方法怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。