【ES6入门02】：解构赋值

数组解构赋值

1.基本用法

{
    let a,b;
    [a,b] = [1,2];
    console.log(a, b); // 1 2
}
{
    let a,b,c;
    [a,b,...c] = [1,2,3,4,5,6];
    console.log(a, b, c); // 1 2 [3,4,5,6]
}
{
    let a,b,c;
    [a,b,c=3] = [1,2];  // 设置默认值
    console.log(a, b, c); // 1 2 3
}

2.变量交换

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

3.函数返回结果赋值

{
    function f() {
        return [true, false];
    }
    let a,b;
    [a, b] = f();
    console.log(a, b); // true false
}

4.忽略某些返回值，只取需要的

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

5.函数返回结果不确定，只关心第n个，剩余的赋值到一个数组

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

对象解构赋值

1.基本用法

{
    let obj = {p: 42, q: true};
    // 变量名要和属性名一致对应，变量名等于属性名
    // 左侧是一个对象，右侧也是一个对象
    let {p, q} = obj;
    console.log(p, q); // 42 true
}
{
    let {a=10, b=5} = {a:3}; // 设置默认值
    console.log(a, b); // 3 5
}

2.json数据的解构赋值

{
    let data = {
        title: 'hahaha',
        test: [
            {
                title: 'yoyoyo',
                desc: 'description'
            }
        ]
    };
    let {title: mainTitle, test: [{title: subTitle}]} = data;
    console.log(mainTitle, subTitle); // hahaha yoyoyo
}