ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
以前，为变量赋值，只能直接指定值。
let [a, b, c] = [1, 2, 3];
上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

解构赋值

1. 数组解构赋值

类型一

1
2
3
4
5
6
{
    let a, b, r;
    [a, b] = [2, 3];
    // 相当于 let a=2; let b=3;
    console.log(a, b) // a=2,b=3
}

类型二 …方法

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

2. 对象解构赋值

类型

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

默认值

1
2
3
4
5
6
{
    let a, b, c;
    [a, b, c = 3] = [1, 2]
    console.log(a, b, c); // a=1;b=2,c=3
    // 当c没有赋值的情况下 就会 使得 c = undefind
}

使用的场景

场景1 值的交换，比取中间值c方便。

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

场景2 取得返回值中的数组形式。

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

场景3 筛选值。

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

场景4 对象赋值

1
2
3
4
5
{
    let o = { p: 10, q: true };
    let { p, q } = o;
    console.log(p, q) // p=10;q=true
}

场景5 json 中的取值

1
2
3
4
5
6
7
8
9
10
11
{
    let data = {
        title: 'abc',
        names: [{
            title: 'title',
            desce: 'description'
        }]
    }
    let { title: esTitle, names: [{ title: cnTitle }] } = data;
    console.log(esTitle, cnTitle) // abc, title
}