我正在参加「掘金·启航计划」

前言

解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

解构赋值

解构赋值就是解析某一数据结构，将结构匹配，索引值（或属性值）相同的完成赋值。

例如：

数组：

    const [a, b, c] = [1, 2, 3];
    // 即：
    // a <- 1
    // b <- 2
    // c <- 3
    console.log(a, b, c);   // 1 2 3

对象:

    const obj = {
        a: 1,
        b: 2
    };
    const { a, b } = obj;
    console.log(a, b);   // 1 2

已声明的对象，为了避免歧义解构赋值需在（）中进行，避免其 '{}' 被误解成块级作用域。

    let a = null;
    ({a} = { a: 1 })
    console.log(a);   // 1

别名

对象在解构赋值时可以使用别名。

例如：

    const obj = {
        a: 1,
        b: 2
    };
    const { a: x, b: y} = obj; 
    console.log(x, y);   // 1 2

嵌套

例如：对数组、对象的嵌套解构赋值。

    // 数组
    const [a, [, b], c] = [1, [2, 3, 4], 5];
    console.log(a, b, c);   // 1 3 5
    
    // 对象
    const obj = {
        a: 1,
        b: 2,
        c: {
            c1: 3,
        }
    };
    const { a, b, c:{ c1 } } = obj;
    console.log(a, b, c1);   // 1 2 3

不取的可以用 , 跳过；

设置默认值

当数组成员等于undefined时，对应的默认值生效。

例如：

    // 数组
    const [a=2, b=3] = [1];
    console.log(a, b);   // 1 3
    
    // 对象
    const obj = {
        a: 1,
        b: 2
    };
    const { a = 7, b = 8, c = 9} = obj; 
    console.log(a, b, c);   // 1 2 9

当默认值是表达式时，默认值表达式时惰性求值的（即：非必要，不执行）。

例如：

    const func = function () {
        console.log('func执行了');
        return -1;
    }
    // 数组
    const [a = func()] = [0];
    console.log(a);   // 0
    
    // 对象
    const obj = {
        a: 1,
        b: 2
    };
    const { a = func(), b = 8, c = 9} = obj; 
    console.log(a, b, c);   // 1 2 9

注意：因为此时a对应的值非undefined，所以函数func并未执行。

应用

交换变量

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

arguments的解构赋值

例如：

    const func = function () {
        const [a, b] = arguments;
        console.log(a, b);
    }
    func(1, 2);   //1 2