欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES6下javascript解構(gòu)賦值常見用法總結(jié)

 更新時(shí)間：2022年01月30日 09:42:14   投稿：wdc  
這篇文章主要介紹了在ES6下javascript賦值常見用法總結(jié),需要的朋友可以參考下

Javascript解構(gòu)賦值出現(xiàn)的契機(jī)：

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let a = obj.a
    let b = obj.b

Javascript解構(gòu)賦值問題核心：

每次取值既要確定對象屬性名，還得重新定義一個(gè)變量占用多一行，代碼行數(shù)和重復(fù)的聲明a，使得代碼不夠簡潔，能否通過左邊變量名，匹配到右邊的屬性名從而取得對應(yīng)的值，ES6解構(gòu)語法核心就基于這樣的模式匹配思想

上面的問題解構(gòu)方案:

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

很明顯看到，我們無需在右側(cè)顯式聲明取值屬性名，完全依據(jù)右邊結(jié)構(gòu)進(jìn)行對應(yīng)取值，非常優(yōu)雅

Javascript解構(gòu)賦值應(yīng)用場景：

1.對象聲明解構(gòu)

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

2.對象賦值解構(gòu)

    let a, b
    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    ({a, b} = obj)
    // 更常見的場景是變量c d被聲明到全局,這種情況在vue很常見，數(shù)據(jù)被提前聲明到data選項(xiàng)，數(shù)據(jù)訪問一般都是this.xxxdata,此時(shí)就很有用了
    ({a:c, b:d} = obj)

3.變量交換

    [x,y] = [y,x]

4.數(shù)組解構(gòu)

   let  [first,] = arr//獲取 
   let [first, ...rest] = arr//獲取第一個(gè)，以及剩余參數(shù)

5.函數(shù)對象實(shí)參解構(gòu)

    function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {})
    {...}

更多關(guān)于ES6下的Javascript使用小技巧請查看下面的相關(guān)鏈接

相關(guān)文章

最新評論