1. 程式人生 > 程式設計 >ES6下javascript解構賦值常見用法總結

ES6下javascript解構賦值常見用法總結

解構賦值出現的契機:

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

script解構賦值問題核心:

每次取值既要確定物件屬性名,還得重新定義一個變數佔用多一行,程式碼行數和重複的宣告a,使得程式碼不夠簡潔,能否通過左邊變http://www.cppcns.com量名,匹配到右邊的屬性名從而取得對應的值,ES6解構語法核心就基於這樣的模式匹配思想

上面的問題解構方案:

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

很明顯看到,我們無需在右側顯式宣告取值屬性名,完全依據右邊結構進行對應取值,非常優雅

Javascript解構賦值應用場景:

1.物件宣告解構

    let obj = {
        a: 1,b} = obj
    // a=1 b=2www.cppcns.com

2.物件賦值解構

    let a,b
    let obj = {
        a: 1,b: 2
    }
    // 取值
    ({a,b} = obj)
    // 更常見的場景是變數c d被宣告到全域性,這種情況在很常見,數據被提前宣告到data選項,資料訪問一般都是this.xxxdata,此時就很有用了
    ({a:c,b:d} = obj)

3.變數交換

    [x,y] = [y,x]

4.陣列解構

   let  [first,] = arr//獲取 
   let [first,...rest] = arr//獲取第一個,以及剩餘引數

5.函式物件實參解構

    function buildhttp://www.cppcns.comAnimal({accessory = "",animal = "cat",color = 'rainbow',hairType = 'straight'} = {})
    {...}

更多關於ES6下的Javascript使用小技巧請檢視下面的相關連結