站長資訊網(wǎng)本篇文章給大家?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)部分有
