解構賦值

解構賦值

什麼是解構賦值:

語法上就是賦值的作用。

解構:左邊一種結構，右邊一種結構，左右一一對應進行賦值。

解構賦值的分類:

數組解構賦值           --重點

對象解構賦值           --重點

字符串解構賦值

布爾值解構賦值

函數參數解構賦值

數值解構賦值

1.數組解構賦值 

{
    let a,b,rest;
    [a,b]=[1,2];
    console.log(a,b);
}

{
    let a,b,rest;
    [a,b,...rest]=[1,2,3,4,5,6]
}

解構賦值的特性:   ... 把其它的歸爲一個數組。

3.對象解構賦值

{
    let a,b;
    ({a,b}={a:1,b:2})
    console.log(a,b)
}

其它的類型都是從這2種上做的延伸.

{
    let a, b, c, crest;
    [a, b, c = 3] = [1, 2];
    console.log(a, b, c);
}

可以給c賦值默認值，防止沒有成功配對賦值時候值爲undefind情況

{
    let a=1;
    let b=2;
    [a,b]=[b,a];
    console.log(a,b)
}

實現了變量的交換，以前需要用一個值存儲。

數組解構賦值使用場景：1

{
    function f() {
        return [1,2]
    }
    let a,b;
    [a,b]=f();
    console.log(a,b);
}

2：

{
    function f() {
        return [1, 2, 3, 4, 5]
    }

    let a, b, c;
    [a, , , b] = f();
    console.log(a, b)
}

第一個逗號之間對應的是2，第二個對應的是3，第三個對應的是4也就是b。這種情況就是忽略其它返回值，只關心自己想要的。

3：

{
    function f() {
        return [1, 2, 3, 4, 5]
    }

    let a, b, c;
    [a, ...b] = f();
    console.log(a, b)
}

取第一個元素，其它的爲一個數組。可以和，混合使用

對象的解構賦值：

{
    let o={p:42,q:true};
    let {p,q}=o;
    console.log(p,q);
}

默認值：

{
    let {a = 10, b = 5} = {a: 3};
    console.log(a, b);
}

對象解構賦值場景:

{
    let metaData = {
        title: 'abc',
        test: [{
            title: 'test',
            desc: 'descrption'
        }]
    }
    let {title: esTitle, test: [{title: cnTitle}]} = metaData;
    console.log(esTitle, cnTitle);
}

模擬了一個json數據，然後把其中我們想要的值取出來賦值給 變量，是不是很簡單，特別常用。