本篇文章給大家?guī)砹薐avaScript中對象解構(gòu)用法解析的相關(guān)知識，希望對大家有幫助。

ES6（ES2015）的發(fā)布，給JavaScript 提供了一種更方便快捷的方式來處理對象的屬性。該機制稱為Destructuring（也稱為解構(gòu)賦值）。但是你真的會用嗎？你真的了解各種場景下，解構(gòu)賦值的用法嗎？

使用解構(gòu)從對象中獲取值

對象解構(gòu)最基本的用法是從對象中檢索屬性鍵的值。

例如，我們定義了一個對象，他有兩個屬性：name和age

const User = {   name: '搞前端的半夏',   age: 18 }

傳統(tǒng)上，我們將使用點 (.) 表示法或下標 ([]) 表示法從對象中檢索值。下面的代碼片段顯示了使用點符號檢索對象的值id和name從對象中檢索值的示例。employee

在之前我們想要獲取對象中某個屬性的值，通產(chǎn)是使用.或者[]。

const name = User['name']; const age = User.age;

當然這兩種方式在當前情況下是沒有問題的，但是當User的屬性多了，我們就要不停的復制粘貼，產(chǎn)生很多重復的代碼。

有了結(jié)構(gòu)賦值，我們就可以快速的來獲取值。例如我們使用對象的鍵名來創(chuàng)建變量，并將對象的值分配給相同的鍵。這樣無論有多少屬性，我們只要賦值屬性名即可，同樣的也減少了很多重復代碼。

const { name, age } = User;

使用解構(gòu)從嵌套對象中獲取值

在上面的例子中，User只是一個簡單的單層對象，我們在日常的開發(fā)中也會遇到嵌套的對象，，那么使用結(jié)構(gòu)賦值，我們該如何檢索嵌套對象中的值。下面我們重新定義User對象，給這個對象新增一個contact屬性，它包含著User的phone。。

const User = {   name: '搞前端的半夏',   age: '18',   contact:{     phone:'110',   } }

如果我們用.的當時來回去phone的值,則需要兩次.

const phone = User.contact.phone;

如果使用解構(gòu)賦值的話：則寫法如下：

const  {contact:{phone}}=User consosle.log(phone)  // 輸出10.

無論是多少層的嵌套，只要按照這個寫法，一定會拿到具體的值。

使用對象解構(gòu)定義一個新變量以及默認值

默認值

當然我們在日常開發(fā)的過程中，可能會遇到很多極端的情況，

例如后端傳過來的對象，可能會缺失某些字段

const User = {   name: '搞前端的半夏', }

或者屬性沒有具體的值：

const User = {   name: '搞前端的半夏',   age: '' }

當我們使用解構(gòu)賦值的話：無論是否存在age屬性的話，都會創(chuàng)建age變量。

const { name, age } = employee;

當User.age沒有具體值得話，我們則可以使用

const { name, age=18 } = employee;

給age一個默認值。

新變量

堅持，稍等。解構(gòu)部分有