解構(gòu)賦值其實(shí)就是如何優(yōu)雅地取值罷了。

（1）對(duì)象原型：

使用了解構(gòu)賦值后（對(duì)比原型），可以做到優(yōu)雅地取值。
game是一個(gè)對(duì)象，用了結(jié)構(gòu)賦值后，等號(hào)兩邊要一致，也就是說(shuō)等號(hào)右邊是個(gè)game對(duì)象,那么等號(hào)左邊也應(yīng)該是個(gè)對(duì)象。

大括號(hào)里面可以寫(xiě)game對(duì)象對(duì)應(yīng)的屬性。

完整代碼：

效果是一致的。

（2）數(shù)組原型。

開(kāi)始結(jié)構(gòu)賦值
首先我們得明確等號(hào)兩邊數(shù)據(jù)類(lèi)型保持一致。
等號(hào)右邊是當(dāng)前數(shù)組games，是數(shù)組類(lèi)。那么等號(hào)左邊也應(yīng)該是數(shù)組[ ]

games數(shù)組里面有3個(gè)值，我們用a,b,c接收。

完整代碼：（對(duì)比原型來(lái)看）

取值方式更加優(yōu)雅，一行代碼搞定。

（3）對(duì)象嵌套，對(duì)象作為一個(gè)屬性的存在。
原型：

我結(jié)構(gòu)賦值想取game對(duì)象嵌套下的giftPacks對(duì)象里面的屬性呢？

（4）在嵌套對(duì)象中各自擁有的屬性卻巧合重名會(huì)怎么樣？
原型：

很顯然，const關(guān)鍵字不允許重名的存在。
方法一，將其中一個(gè)name屬性改掉，改成name1。

方法二：重名屬性可以添加別名（小名）區(qū)別開(kāi)來(lái)，比如我們這里有2個(gè)同名的name屬性，肯定要區(qū)分一個(gè)。

方法一和方法二效果是一致的。

如何在項(xiàng)目中做到準(zhǔn)確地結(jié)構(gòu)賦值？

場(chǎng)景1：在函數(shù)當(dāng)中，數(shù)組作為實(shí)參，進(jìn)行傳參時(shí)，遍歷數(shù)組做累加運(yùn)算。

原型：

我們實(shí)參是個(gè)數(shù)組，傳參也僅有一個(gè)參數(shù)arr，一個(gè)參數(shù)的話，所以是可以省掉小括號(hào)的。

整體：

那么實(shí)參是個(gè)數(shù)組的函數(shù)又怎么解構(gòu)賦值呢?

那么這一塊是怎么演變過(guò)來(lái)的。

image.png

實(shí)參作為對(duì)象傳入函數(shù)。

原型：

在原型上改造，將對(duì)象最為實(shí)參傳入。

在對(duì)象里面填入屬性。

沒(méi)有實(shí)參，直接定義形參。

有了實(shí)參后，直接覆蓋掉形參。

作為函數(shù)返回值使用解構(gòu)賦值

作為變量交換而使用解構(gòu)賦值

JSON格式輸出
JSON(JavaScript Object Notation, JS 對(duì)象簡(jiǎn)譜)

作為json格式使用解構(gòu)賦值

模擬ajax請(qǐng)求數(shù)據(jù)，向后端發(fā)送請(qǐng)求。
目錄下創(chuàng)建一個(gè)json文件，

json文件里面首先有一對(duì)大括號(hào)

內(nèi)容輸入：

vue庫(kù)下的axios請(qǐng)求，我們用它的CDN.

網(wǎng)址：https://www.bootcdn.cn/axios/
axios的CDN遠(yuǎn)程地址：https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js
在index.html中導(dǎo)入這個(gè)CDN：

這個(gè)庫(kù)的使用方法：

關(guān)于.then()的解釋?zhuān)篴xios返回的是一個(gè)promise，promise需要使用then方法來(lái)獲取到返回成功的值，所以這里的then可以理解為是當(dāng)這個(gè)文件獲取成功之后所返回的內(nèi)容。
已經(jīng)(get到了)請(qǐng)求到剛剛我們?cè)赿ata.json中編寫(xiě)的數(shù)據(jù)

waring:這里有個(gè)小bug，就是axios發(fā)送的是http請(qǐng)求，我們?cè)赩SC編輯器安裝了Live Server (實(shí)時(shí)加載路徑)插件才能請(qǐng)求到j(luò)son數(shù)據(jù)。

，如果是在文件夾下雙擊直接打開(kāi)，是無(wú)法請(qǐng)求到的，因?yàn)樗莊ile路徑。

用箭頭函數(shù)進(jìn)一步優(yōu)化代碼，去掉關(guān)鍵字，一個(gè)參數(shù)不要小括號(hào)。

那么我們將如何取值使用，讓我們一起來(lái)解構(gòu)賦值吧。

上面是data數(shù)據(jù)是一步到位的。

它是在data下面的。
我們就要用到這樣逐層解構(gòu)了。（這只是個(gè)方法哈，內(nèi)容對(duì)不上）

拓展：解決es6新特性瀏覽器兼容問(wèn)題（關(guān)于項(xiàng)目開(kāi)發(fā)）
對(duì)我來(lái)說(shuō)太遙遠(yuǎn)了。

使用BABEL工具將es6語(yǔ)法轉(zhuǎn)換為es5語(yǔ)法，es5當(dāng)前所有瀏覽器適用。
具體視頻：https://www.imooc.com/video/21656