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

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

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

技術(shù)交流群


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