5個JS解構有趣的用途-創新互聯

1. 交換變量

我們提供的服務有：成都做網站、成都網站建設、成都外貿網站建設、微信公眾號開發、網站優化、網站認證、蓬江ssl等。為1000+企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的蓬江網站制作公司

通常交換兩個變量的方法需要一個額外的臨時變量,來看看例子：

let?a?=?1;let?b?=?2;let?temp;temp?=?a;a?=?b;b?=?temp;a;?//?=>?2b;?//?=>?1復制代碼

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

如果使用解構的方式會更簡單，不需要什么鬼的 temp 變量。

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

[a，b] = [b，a]是解構賦值，右邊，創建了一個數組[b, a]，即[2,1]。這個數組2被賦值了給a，1被賦值給了b。

雖然這種方式也創建了臨時數組，但這種方式給看起來至少更簡潔，使用解構咱們還可以交換2個以上的變量。

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

2. 訪問數組中元素

有種場景，咱們可能有一個為空的項數組。并且希望訪問數組的第一個、第二個或第n個項，但如果該項不存在，則使用指定默認值。

通常會使用數組的length屬性來判斷

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

使用數組解構，可以更簡潔的實現同樣的效果：

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

const [firstColor = 'white'] = colors 解構將colors數組的第一個元素賦給firstColor變量。如果數組在索引0處沒有任何元素，則分配“white”默認值。

當然還可以更靈活，如果只想訪問第二個元素，可以這么做。

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

注意解構左側的逗號：它表示忽略第一個元素,secondColor使用colors數組中索引為1的元素進行賦值。

3.不可變操作

當我開始使用React和Redux時，被迫編寫了一些遵守不可變性的代碼。雖然一開始有些困難，但后來我看到了它的好處:更容易處理單向數據流。

不變性要求不能改變原始對象。幸運的是，解構可以以不可變的方式輕松實現某些操作。

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

解構 [, ... fooNumbers] = numbers創建一個新的數組fooNumbers，fooNumbers 包含 numbers 元素，除了第一個元素。

numbers 數組沒有發生變化，保持操作不變性。

以同樣不可變的方式，可以從對象中刪除屬性，接著試著從對象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'?}
復制代碼

4.解構 iterables

在前面幾個例子中，對數組使用了解構，但是咱們可以對任何實現可迭代協議( iterable protocol)的對象進行解構。

許多原生基本類型和對象都是可迭代的: array, string, typed arrays, set 和 map。

如果不想局限于基本類型，通過實現可迭代協議，可以定制解構邏輯。

movies包含一個movie對象列表。在解構movies時，將title作為字符串獲取是非常棒的。讓咱們實現一個自定義迭代器。

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'復制代碼

movies對象通過定義Symbol.iterator方法來實現可迭代協議，迭代器迭代title。

遵循iterable協議允許將movies對象分解為title，具體方法是讀取第一個movies的title:const [firstMovieTitle] = movies。

5.解構動態屬性

根據經驗，通過屬性對對象進行解構比數組解構更常見。

對象的解構看起來很更簡單：

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

const {title} = movie創建一個變量title，并將屬性movie.title的值賦給它。

到對象解構時，我有點驚訝于咱們不必靜態地知道屬性名，可以使用動態屬性名稱來解構對象。

為了了解動態解構如何工作的，編寫一個greet函數：

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

使用2個參數調用greet() 函數：對象和屬性名稱。

在greet()內部，解構賦值const {[nameProp]：name ='Unknown'} = obj使用方括號的形式 [nameProp]讀取動態屬性名稱，name變量接收動態屬性值。

更好的做法是，如果屬性不存在，可以指定默認值“Unknown”。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

干貨系列文章匯總如下，覺得不錯點個Star，歡迎 加群 互相學習。

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

網頁題目：5個JS解構有趣的用途-創新互聯
URL分享：http://m.kartarina.com/article36/dicdpg.html

成都網站建設公司_創新互聯，為您提供建站公司、網站維護、網站導航、手機網站建設、軟件開發、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯