10 個(gè) JS 解構(gòu)賦值相關(guān)的知識(shí)點(diǎn)

點(diǎn)擊上方?前端陽(yáng)光，關(guān)注公眾號(hào)
回復(fù)加群，加入技術(shù)交流群交流群

英文 |?https://javascript.plainenglish.io/10-powerful-javascript-destructuring-techniques-every-developer-should-know-15ae06818bb6
翻譯 | 楊小愛

JavaScript 解構(gòu)賦值已經(jīng)存在一段時(shí)間了。它提供了直接將對(duì)象和數(shù)組中的值解包為變量的機(jī)會(huì)，為我們開發(fā)人員節(jié)省了大量時(shí)間和代碼。
因?yàn)榻鈽?gòu)是如此強(qiáng)大和方便，我想你很難找到一個(gè)沒有使用過它的 JavaScript 開發(fā)者。但是，盡管您可能已經(jīng)了解了解構(gòu)的要點(diǎn)，但您可能還沒有充分發(fā)揮其潛力。為了幫助您從學(xué)徒到大師，這里有 10 種方法可以提升您的解構(gòu)水平。
1、忽略值
數(shù)組通常攜帶大量數(shù)據(jù)。很多時(shí)候，只需要部分?jǐn)?shù)據(jù)進(jìn)行進(jìn)一步處理。因此，在解構(gòu)數(shù)組時(shí)，您可以有選擇地解壓縮值，忽略不需要的值。如果您希望值保持不變，只需寫一個(gè)逗號(hào)。
2、分配剩余值
大多數(shù)開發(fā)人員都會(huì)知道 rest 參數(shù)。一個(gè)函數(shù)的參數(shù)以 3 個(gè)點(diǎn)為前綴，接受無數(shù)個(gè)參數(shù)并將它們解析為一個(gè)數(shù)組。
但是你知道休息模式也可以用于解構(gòu)嗎？通過在變量前加上 3 個(gè)點(diǎn)，您可以將所有剩余的值解包到其中。
這適用于對(duì)象和數(shù)組解構(gòu)。盡管知道對(duì)于對(duì)象的提案目前處于第 4 階段，這意味著它將正式包含在 ECMAScript 的下一次迭代中。
3、組合數(shù)組和對(duì)象解構(gòu)
對(duì)象和數(shù)組解構(gòu)本身就很強(qiáng)大，但將兩者結(jié)合起來可以為您提供開發(fā)超能力。如果您面對(duì)一個(gè)里面有對(duì)象的數(shù)組，您可以使用這種技術(shù)直接解包嵌套的對(duì)象。
4、交換數(shù)組中的變量
您是否曾經(jīng)需要交換數(shù)組中的兩個(gè)變量？如果是這樣，您知道這是一項(xiàng)繁瑣的任務(wù)。要交換到兩個(gè)變量，您需要引入一個(gè)臨時(shí)的第三個(gè)變量來存儲(chǔ)要交換其中的一個(gè)值。
var temp = array[index1];
array[index1] = array[index2];array[index2] = temp;
但是使用解構(gòu)，這個(gè)臨時(shí)變量就不再需要了。可以直接交換兩個(gè)變量！
5、重命名變量
每個(gè)開發(fā)人員都見過至少可以說是模棱兩可的對(duì)象鍵。鍵經(jīng)常包含拼寫錯(cuò)誤或與它們的值沒有明確的關(guān)系。為了克服這個(gè)問題，您可以在解構(gòu)對(duì)象時(shí)設(shè)置一個(gè)新的變量名稱。解壓縮值時(shí)，只需寫一個(gè)冒號(hào)，后跟新名稱。
6、默認(rèn)值
如果在編寫代碼時(shí)有一個(gè)保證，那就是您不能信任數(shù)據(jù)。值可能會(huì)意外更改，并且無法避免邊緣情況。
因此，提供默認(rèn)值或回退值通常是一個(gè)好主意。解構(gòu)時(shí)設(shè)置默認(rèn)值非常簡(jiǎn)單。只需在變量名后寫一個(gè) = 符號(hào)，并提供默認(rèn)值。當(dāng)數(shù)組或?qū)ο笾械闹滴炊x時(shí)——任何另一個(gè)空值都將被解包——默認(rèn)值被分配給變量。
7、解構(gòu)正則表達(dá)式
正則表達(dá)式用于定位字符串中的模式。當(dāng)在 javascript 中執(zhí)行正則表達(dá)式 (RegExp.exec() ) 時(shí)，匹配項(xiàng)將作為字符串?dāng)?shù)組返回。
使用數(shù)組解構(gòu)，您可以直接將 RegExp 匹配解包到所需的變量。在下面的例子中，我們將一個(gè)郵件地址分解成不同的部分，并直接將它們分配給變量。
8、嵌套解構(gòu)
對(duì)象和數(shù)組并不總是平坦的。您知道您不需要單獨(dú)的解構(gòu)賦值來解壓值嗎？賦值可以嵌套在一個(gè)子句中以直接達(dá)到所需的級(jí)別。
9、動(dòng)態(tài)對(duì)象鍵
假設(shè)您要解包其鍵是動(dòng)態(tài)的對(duì)象。解構(gòu)是不可能的，因?yàn)槟荒艽_定鍵名的有效性嗎？
不！對(duì)象鍵可以在解構(gòu)時(shí)動(dòng)態(tài)分配，提供額外的靈活性。
10、解構(gòu)函數(shù)參數(shù)
在之前的所有示例中，我們將對(duì)象值解包為變量。但是如果一個(gè)對(duì)象作為函數(shù)參數(shù)提供，我們可以一起跳過這一步。函數(shù)參數(shù)可以直接解構(gòu)，使值可用于函數(shù)體。
總結(jié)
以上內(nèi)容就是我與您分享的10個(gè)關(guān)于JavaScript的解構(gòu)技術(shù)，希望對(duì)您有所幫助，也希望您在這個(gè)過程中學(xué)到了一些新東西。
最后，感謝您的閱讀，祝編程愉快！

技術(shù)交流群


我組建了技術(shù)交流群，里面有很多?大佬，歡迎進(jìn)來交流、學(xué)習(xí)、共建。回復(fù)加群即可。
???“分享、點(diǎn)贊、在看” 支持一波??