ES6學習解構賦值

前端coder發表於2019-02-17
賦值

結構賦值定義

結構賦值，又叫結構化賦值，出現主要是為了方便從後端獲取複雜資料結構值。下面介紹解構賦值。

解構物件

     let obj = {
        name: 'aa',
        age: 17
    }
複製程式碼

以上面obj物件為例

    let name
    let age
    ({name,age} = obj)
    console.log(name,age) //aa 17
複製程式碼

通過{}可以很容易獲取到obj裡面的name，age物件。
獲取同名物件還可以這樣寫

    let {name,age} = obj
    console.log(name,age) //aa 17
複製程式碼

獲取不同名變數可以在後面重寫

    let {name:oName,age:oAge} = obj
    console.log(oName,oAge) //aa 17
複製程式碼

預設賦值 sex = 'male'

    let {name:oName,age:oAge,sex = 'male'} = obj
    console.log(oName,oAge,sex) //aa 17 male
複製程式碼

預設賦值也可在函式形參中使用

    function sum(x= 10,y = 20){
        console.log(x + y) //50  30+20=50,傳入取實參，不傳入取預設值。
        return x + y
    }
    sum(30)
複製程式碼

解構陣列

    let arr = [1,2,3]
    let [x,y,z] = arr // 也可寫成 let {0:x,1:y,2:z} = arr
    console.log(x,y,z) //1,2,3
複製程式碼

因為陣列有length，所以獲取陣列length方法

 let arr = [1,2,3]
    let {length} = arr
    console.log(length) //3
複製程式碼

如果陣列裡有物件，也是可以結構賦值的

    let arr1 = [1,2,3,{name:'aa'}]
    let [,,,{name}] = arr1
    console.log(name) //aa
複製程式碼

結構賦值相對簡單，在這裡就不多說了。

有錯誤歡迎指出，謝謝觀看。

廣告：
作者github：github.com/webxukai
作者gitee：gitee.com/webxukai
作者微信：e790134972
作者QQ:我想你應該知道了！
作者QQ郵箱：同上，呵呵！

ES6其他文章：

ES6學習let&const
juejin.im/post/5c683e…
ES6學習...運算子
juejin.im/post/5c6917…

相關文章