1. 交換變量

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、蓬江ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的蓬江網(wǎng)站制作公司

通常交換兩個(gè)變量的方法需要一個(gè)額外的臨時(shí)變量,來(lái)看看例子：

let?a?=?1;let?b?=?2;let?temp;temp?=?a;a?=?b;b?=?temp;a;?//?=>?2b;?//?=>?1復(fù)制代碼

temp是一個(gè)臨時(shí)變量，它先保存a的值。然后把b的值賦值給a，接著將temp值賦給 b。

如果使用解構(gòu)的方式會(huì)更簡(jiǎn)單，不需要什么鬼的 temp 變量。

let?a?=?1;let?b?=?2;
[a,?b]?=?[b,?a];
a;?//?=>?2b;?//?=>?1復(fù)制代碼

[a，b] = [b，a]是解構(gòu)賦值，右邊，創(chuàng)建了一個(gè)數(shù)組[b, a]，即[2,1]。這個(gè)數(shù)組2被賦值了給a，1被賦值給了b。

雖然這種方式也創(chuàng)建了臨時(shí)數(shù)組，但這種方式給看起來(lái)至少更簡(jiǎn)潔，使用解構(gòu)咱們還可以交換2個(gè)以上的變量。

let?zero?=?2;let?one?=?1;let?two?=?0;[zero,?one,?two]?=?[two,?one,?zero];zero;?//?=>?0one;?//?=>?1two;?//?=>?2復(fù)制代碼

2. 訪問(wèn)數(shù)組中元素

有種場(chǎng)景，咱們可能有一個(gè)為空的項(xiàng)數(shù)組。并且希望訪問(wèn)數(shù)組的第一個(gè)、第二個(gè)或第n個(gè)項(xiàng)，但如果該項(xiàng)不存在，則使用指定默認(rèn)值。

通常會(huì)使用數(shù)組的length屬性來(lái)判斷

const?colors?=?[];let?firstColor?=?'white';if?(colors.length?>?0)?{
?firstColor?=?colors[0];
}
firstColor;?//?=>?'white'復(fù)制代碼

使用數(shù)組解構(gòu)，可以更簡(jiǎn)潔的實(shí)現(xiàn)同樣的效果：

const?colors?=?[];const?[firstColor?=?'white']?=?colors;
firstColor;?//?=>?'white'復(fù)制代碼

const [firstColor = 'white'] = colors 解構(gòu)將colors數(shù)組的第一個(gè)元素賦給firstColor變量。如果數(shù)組在索引0處沒(méi)有任何元素，則分配“white”默認(rèn)值。

當(dāng)然還可以更靈活，如果只想訪問(wèn)第二個(gè)元素，可以這么做。

const?colors?=?[];const?[,?secondColor?=?'black']?=?colors;
secondColor;?//?=>?'black'復(fù)制代碼

注意解構(gòu)左側(cè)的逗號(hào)：它表示忽略第一個(gè)元素,secondColor使用colors數(shù)組中索引為1的元素進(jìn)行賦值。

3.不可變操作

當(dāng)我開(kāi)始使用React和Redux時(shí)，被迫編寫(xiě)了一些遵守不可變性的代碼。雖然一開(kāi)始有些困難，但后來(lái)我看到了它的好處:更容易處理單向數(shù)據(jù)流。

不變性要求不能改變?cè)紝?duì)象。幸運(yùn)的是，解構(gòu)可以以不可變的方式輕松實(shí)現(xiàn)某些操作。

const?numbers?=?[1,?2,?3];
const?[,?...fooNumbers]?=?numbers;
fooNumbers;?//?=>?[2,?3]numbers;?//?=>?[1,?2,?3]復(fù)制代碼

解構(gòu) [, ... fooNumbers] = numbers創(chuàng)建一個(gè)新的數(shù)組fooNumbers，fooNumbers 包含 numbers 元素，除了第一個(gè)元素。

numbers 數(shù)組沒(méi)有發(fā)生變化，保持操作不變性。

以同樣不可變的方式，可以從對(duì)象中刪除屬性，接著試著從對(duì)象big中刪除foo屬性：

const?big?=?{
?foo:?'value?Foo',
?bar:?'value?Bar'};
const?{?foo,?...small?}?=?big;
small;?//?=>?{?bar:?'value?Bar'?}
big;?//?=>?{?foo:?'value?Foo',?bar:?'value?Bar'?}
復(fù)制代碼

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。

如果不想局限于基本類型，通過(guò)實(shí)現(xiàn)可迭代協(xié)議，可以定制解構(gòu)邏輯。

movies包含一個(gè)movie對(duì)象列表。在解構(gòu)movies時(shí)，將title作為字符串獲取是非常棒的。讓咱們實(shí)現(xiàn)一個(gè)自定義迭代器。

const?movies?=?{?list:?[
?{?title:?'Heat'?},?
?{?title:?'Interstellar'?}
?],
?[Symbol.iterator]()?{?let?index?=?0;?return?{?next:?()?=>?{?if?(index?<?this.list.length)?{?const?value?=?this.list[index++].title;?return?{?value,?done:?false?};
?}?return?{?done:?true?};
?}
?};
?}
};const?[firstMovieTitle]?=?movies;console.log(firstMovieTitle);?//?=>?'Heat'復(fù)制代碼

movies對(duì)象通過(guò)定義Symbol.iterator方法來(lái)實(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)，通過(guò)屬性對(duì)對(duì)象進(jìn)行解構(gòu)比數(shù)組解構(gòu)更常見(jiàn)。

對(duì)象的解構(gòu)看起來(lái)很更簡(jiǎn)單：

const?movie?=?{?title:?'Heat'?};
const?{?title?}?=?movie;title;?//?=>?'Heat'復(fù)制代碼

const {title} = movie創(chuàng)建一個(gè)變量title，并將屬性movie.title的值賦給它。

到對(duì)象解構(gòu)時(shí)，我有點(diǎn)驚訝于咱們不必靜態(tài)地知道屬性名，可以使用動(dòng)態(tài)屬性名稱來(lái)解構(gòu)對(duì)象。

為了了解動(dòng)態(tài)解構(gòu)如何工作的，編寫(xiě)一個(gè)greet函數(shù)：

function?greet(obj,?nameProp)?{?const?{?[nameProp]:?name?=?'Unknown'?}?=?obj;?return?`Hello,?${name}!`;
}
greet({?name:?'Batman'?},?'name');?//?=>?'Hello,?Batman!'greet({?},?'name');?//?=>?'Hello,?Unknown!'復(fù)制代碼

使用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”。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

交流

干貨系列文章匯總?cè)缦?，覺(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)題目：5個(gè)JS解構(gòu)有趣的用途-創(chuàng)新互聯(lián)
URL分享：http://chinadenli.net/article36/dicdpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)