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

創(chuàng)新互聯(lián)公司專注于果洛州企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,電子商務商城網(wǎng)站建設。果洛州網(wǎng)站建設公司,為果洛州等地區(qū)提供建站服務。全流程定制網(wǎng)站開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

基礎解構

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。

別名解構

如果需要把對象屬性賦值給屬性名不一致的變量名，可以如下代碼來實現(xiàn)：

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