<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

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

          共 1681字,需瀏覽 4分鐘

           ·

          2021-12-24 20:45


          英文 | https://javascript.plainenglish.io/10-powerful-javascript-destructuring-techniques-every-developer-should-know-15ae06818bb6

          翻譯 | 楊小愛(ài)


          JavaScript 解構(gòu)賦值已經(jīng)存在一段時(shí)間了。它提供了直接將對(duì)象和數(shù)組中的值解包為變量的機(jī)會(huì),為我們開(kāi)發(fā)人員節(jié)省了大量時(shí)間和代碼。
          因?yàn)榻鈽?gòu)是如此強(qiáng)大和方便,我想你很難找到一個(gè)沒(méi)有使用過(guò)它的 JavaScript 開(kāi)發(fā)者。但是,盡管您可能已經(jīng)了解了解構(gòu)的要點(diǎn),但您可能還沒(méi)有充分發(fā)揮其潛力。為了幫助您從學(xué)徒到大師,這里有 10 種方法可以提升您的解構(gòu)水平。
          1、忽略值
          數(shù)組通常攜帶大量數(shù)據(jù)。很多時(shí)候,只需要部分?jǐn)?shù)據(jù)進(jìn)行進(jìn)一步處理。因此,在解構(gòu)數(shù)組時(shí),您可以有選擇地解壓縮值,忽略不需要的值。如果您希望值保持不變,只需寫(xiě)一個(gè)逗號(hào)。

          2、分配剩余值
          大多數(shù)開(kāi)發(fā)人員都會(huì)知道 rest 參數(shù)。一個(gè)函數(shù)的參數(shù)以 3 個(gè)點(diǎn)為前綴,接受無(wú)數(shù)個(gè)參數(shù)并將它們解析為一個(gè)數(shù)組。
          但是你知道休息模式也可以用于解構(gòu)嗎?通過(guò)在變量前加上 3 個(gè)點(diǎn),您可以將所有剩余的值解包到其中。
          這適用于對(duì)象和數(shù)組解構(gòu)。盡管知道對(duì)于對(duì)象的提案目前處于第 4 階段,這意味著它將正式包含在 ECMAScript 的下一次迭代中。

          3、組合數(shù)組和對(duì)象解構(gòu)
          對(duì)象和數(shù)組解構(gòu)本身就很強(qiáng)大,但將兩者結(jié)合起來(lái)可以為您提供開(kāi)發(fā)超能力。如果您面對(duì)一個(gè)里面有對(duì)象的數(shù)組,您可以使用這種技術(shù)直接解包嵌套的對(duì)象。

          4、交換數(shù)組中的變量
          您是否曾經(jīng)需要交換數(shù)組中的兩個(gè)變量?如果是這樣,您知道這是一項(xiàng)繁瑣的任務(wù)。要交換到兩個(gè)變量,您需要引入一個(gè)臨時(shí)的第三個(gè)變量來(lái)存儲(chǔ)要交換其中的一個(gè)值。
          var temp = array[index1];
          array[index1] = array[index2];array[index2] = temp;

          但是使用解構(gòu),這個(gè)臨時(shí)變量就不再需要了??梢灾苯咏粨Q兩個(gè)變量!

          5、重命名變量

          每個(gè)開(kāi)發(fā)人員都見(jiàn)過(guò)至少可以說(shuō)是模棱兩可的對(duì)象鍵。鍵經(jīng)常包含拼寫(xiě)錯(cuò)誤或與它們的值沒(méi)有明確的關(guān)系。為了克服這個(gè)問(wèn)題,您可以在解構(gòu)對(duì)象時(shí)設(shè)置一個(gè)新的變量名稱(chēng)。解壓縮值時(shí),只需寫(xiě)一個(gè)冒號(hào),后跟新名稱(chēng)。

          6、默認(rèn)值

          如果在編寫(xiě)代碼時(shí)有一個(gè)保證,那就是您不能信任數(shù)據(jù)。值可能會(huì)意外更改,并且無(wú)法避免邊緣情況。

          因此,提供默認(rèn)值或回退值通常是一個(gè)好主意。解構(gòu)時(shí)設(shè)置默認(rèn)值非常簡(jiǎn)單。只需在變量名后寫(xiě)一個(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)賦值來(lái)解壓值嗎?賦值可以嵌套在一個(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ù)提供,我們可以一起跳過(guò)這一步。函數(shù)參數(shù)可以直接解構(gòu),使值可用于函數(shù)體。

          總結(jié)

          以上內(nèi)容就是我與您分享的10個(gè)關(guān)于JavaScript的解構(gòu)技術(shù),希望對(duì)您有所幫助,也希望您在這個(gè)過(guò)程中學(xué)到了一些新東西。

          最后,感謝您的閱讀,祝編程愉快!



          學(xué)習(xí)更多技能

          請(qǐng)點(diǎn)擊下方公眾號(hào)

          瀏覽 50
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  在线观看国产一区 | 国产精品99久久久久久久久久久久 | 色老板不卡av在线 | 大香蕉久久久久久成人草 | 免费观看一区二区三区四区 |