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

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

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

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

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

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

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

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

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

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

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

const { name, age } = User;

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

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

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

如果我們用.的當(dāng)時(shí)來回去phone的值,則需要兩次.

const phone = User.contact.phone;

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

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

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

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

默認(rèn)值

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

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

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

或者屬性沒有具體的值：

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

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

const { name, age } = employee;

當(dāng)User.age沒有具體值得話，我們則可以使用

const { name, age=18 } = employee;

給age一個(gè)默認(rèn)值。

新變量

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