建站
咨詢
售后
建站咨詢
新聞中心
[[284514]]
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的建寧網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
1. 交換變量
通常交換兩個(gè)變量的方法需要一個(gè)額外的臨時(shí)變量,來看看例子：
temp是一個(gè)臨時(shí)變量，它先保存a的值。然后把b的值賦值給a，接著將temp值賦給 b。
如果使用解構(gòu)的方式會(huì)更簡單，不需要什么鬼的 temp 變量。
[a，b] = [b，a]是解構(gòu)賦值，右邊，創(chuàng)建了一個(gè)數(shù)組[b, a]，即[2,1]。這個(gè)數(shù)組2被賦值了給a，1被賦值給了b。
雖然這種方式也創(chuàng)建了臨時(shí)數(shù)組，但這種方式給看起來至少更簡潔，使用解構(gòu)咱們還可以交換2個(gè)以上的變量。
2. 訪問數(shù)組中元素
有種場(chǎng)景，咱們可能有一個(gè)為空的項(xiàng)數(shù)組。并且希望訪問數(shù)組的第一個(gè)、第二個(gè)或第n個(gè)項(xiàng)，但如果該項(xiàng)不存在，則使用指定默認(rèn)值。
通常會(huì)使用數(shù)組的length屬性來判斷
使用數(shù)組解構(gòu)，可以更簡潔的實(shí)現(xiàn)同樣的效果：
const [firstColor = 'white'] = colors 解構(gòu)將colors數(shù)組的第一個(gè)元素賦給firstColor變量。如果數(shù)組在索引0處沒有任何元素，則分配“white”默認(rèn)值。
當(dāng)然還可以更靈活，如果只想訪問第二個(gè)元素，可以這么做。
注意解構(gòu)左側(cè)的逗號(hào)：它表示忽略第一個(gè)元素,secondColor使用colors數(shù)組中索引為1的元素進(jìn)行賦值。
3.不可變操作
當(dāng)我開始使用React和Redux時(shí)，被迫編寫了一些遵守不可變性的代碼。雖然一開始有些困難，但后來我看到了它的好處:更容易處理單向數(shù)據(jù)流。
不變性要求不能改變?cè)紝?duì)象。幸運(yùn)的是，解構(gòu)可以以不可變的方式輕松實(shí)現(xiàn)某些操作。
解構(gòu) [, ... fooNumbers] = numbers創(chuàng)建一個(gè)新的數(shù)組fooNumbers，fooNumbers 包含 numbers 元素，除了第一個(gè)元素。
numbers 數(shù)組沒有發(fā)生變化，保持操作不變性。
以同樣不可變的方式，可以從對(duì)象中刪除屬性，接著試著從對(duì)象big中刪除foo屬性：
4.解構(gòu) iterables
在前面幾個(gè)例子中，對(duì)數(shù)組使用了解構(gòu)，但是咱們可以對(duì)任何實(shí)現(xiàn)可迭代協(xié)議( iterable protocol)的對(duì)象進(jìn)行解構(gòu)。
許多原生基本類型和對(duì)象都是可迭代的: array, string, typed arrays, set 和 map。
如果不想局限于基本類型，通過實(shí)現(xiàn)可迭代協(xié)議，可以定制解構(gòu)邏輯。
movies包含一個(gè)movie對(duì)象列表。在解構(gòu)movies時(shí)，將title作為字符串獲取是非常棒的。讓咱們實(shí)現(xiàn)一個(gè)自定義迭代器。
movies對(duì)象通過定義Symbol.iterator方法來實(shí)現(xiàn)可迭代協(xié)議，迭代器迭代title。
遵循iterable協(xié)議允許將movies對(duì)象分解為title，具體方法是讀取第一個(gè)movies的title:const [firstMovieTitle] = movies。
5.解構(gòu)動(dòng)態(tài)屬性
根據(jù)經(jīng)驗(yàn)，通過屬性對(duì)對(duì)象進(jìn)行解構(gòu)比數(shù)組解構(gòu)更常見。
對(duì)象的解構(gòu)看起來很更簡單：
const {title} = movie創(chuàng)建一個(gè)變量title，并將屬性movie.title的值賦給它。
到對(duì)象解構(gòu)時(shí)，我有點(diǎn)驚訝于咱們不必靜態(tài)地知道屬性名，可以使用動(dòng)態(tài)屬性名稱來解構(gòu)對(duì)象。
為了了解動(dòng)態(tài)解構(gòu)如何工作的，編寫一個(gè)greet函數(shù)：
使用2個(gè)參數(shù)調(diào)用greet() 函數(shù)：對(duì)象和屬性名稱。
在greet()內(nèi)部，解構(gòu)賦值const {[nameProp]：name ='Unknown'} = obj使用方括號(hào)的形式 [nameProp]讀取動(dòng)態(tài)屬性名稱，name變量接收動(dòng)態(tài)屬性值。
更好的做法是，如果屬性不存在，可以指定默認(rèn)值“Unknown”。
本文名稱：JavaScript中，5個(gè)解構(gòu)有趣的用途
轉(zhuǎn)載源于：http://www.5511xx.com/article/ccegsgp.html
