本篇文章給大家?guī)?lái)了JavaScript中對(duì)象解構(gòu)用法解析的相關(guān)知識(shí)，希望對(duì)大家有幫助。

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

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

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

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

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

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

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

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

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

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

const { name, age } = User;

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

在上面的例子中，User只是一個(gè)簡(jiǎn)單的單層對(duì)象，我們?cè)谌粘５拈_(kāi)發(fā)中也會(huì)遇到嵌套的對(duì)象，，那么使用結(jié)構(gòu)賦值，我們?cè)撊绾螜z索嵌套對(duì)象中的值。下面我們重新定義User對(duì)象，給這個(gè)對(duì)象新增一個(gè)contact屬性，它包含著User的phone。。

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

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

const phone = User.contact.phone;

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

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

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

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

默認(rèn)值

當(dāng)然我們?cè)谌粘ｉ_(kāi)發(fā)的過(guò)程中，可能會(huì)遇到很多極端的情況，

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

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

或者屬性沒(méi)有具體的值：

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

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

const { name, age } = employee;

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

const { name, age=18 } = employee;

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

新變量

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