站長資訊網
解構是一個概念，分解其中一種數據類型并將其單獨的屬性分配給變量，在文章《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視頻教程》
