1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        分享 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

        翻譯 | 楊小愛


        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í)變量就不再需要了??梢灾苯咏粨Q兩個(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)值非常簡單。只需在變量名后寫一個(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)

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

        手機(jī)掃一掃分享

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

        手機(jī)掃一掃分享

        分享
        舉報(bào)
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            日本无码破解 | 不卡二区 | 国产精品99精品无码视亚 | 久久久久久久久久毛片 | 91啦国产 | 婷婷亚洲激情 | 91精品国产麻豆国产自产在线 | 精品人妻二区三区蜜桃 | 国产福利三区 | 人人干人人澡 |