10個(gè)每個(gè)開發(fā)人員都應(yīng)該知道的強(qiáng)大JavaScript 解構(gòu)技術(shù)

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



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é)到了一些新東西。
最后,感謝您的閱讀,祝編程愉快!
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
![]()

