js中的解构赋值

一、 对象的解构

对象结构赋值的语法就是在表达式的左侧使用了对象的字面量方式，将对象中的值赋值到左侧相同的变量上。语法如下：

    let obj = {
        name: '姓名',
        age: '年龄'
    }
    let { name, age } = obj;
    console.log(name, age); // 姓名 年龄

上面的对象结构都用于变量声明，也可以在赋值的时候使用解构,在声明变量后改变他们的值（注意：必须用圆括号包裹解构赋值语句，否则报语法错误）。语法如下：

    let obj = {
        name: '姓名',
        age: '年龄'
     },
     name = 'lilei',
     age = '20';
    ({ name, age } = obj);
    console.log(name, age); // 姓名 年龄

默认值

当使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量 会被自动赋值为 undefined 。例如：

    let obj = {
        name: '姓名',
        age: '年龄'
    };
    let { sex, name } = obj;
    console.log(sex, name); // undefined "姓名"

赋值给不同的本地变量名

前面所说的都是将取出来的值赋值到本地变量上，有时候我们并不想使用这些变量，而想使用其他的变量名称这种语法也是支持的。它会先取出对象中的值并赋值到新定义的变量上，并且还支持添加默认值，当取不到的时候就使用默认值（如sex给设置默认值为‘男’，取不到值得时候不再显示undefined）。例如：

    let obj = {
        name: '姓名',
        age: '年龄'
    };
    let { name: localName, age: localAge, sex: localSex = '男'} = obj;
    console.log(localName, localAge, localSex); // 姓名 年龄 男

嵌套的对象解构

嵌套对象得解构和单层对象得结构赋值比较类似，需要先取出外层得值，在解构取出内层嵌套得值。例如：

    let obj = {
        name: {
            nameOne: '姓名One',
            nameTwo: '姓名Two' 
        },
        age: '年龄',
    };
    let { name: { nameOne } } = obj;
    console.log(nameOne); // 姓名One

二、数组得解构

数组解构有点与对象得解构类似，不过数组得解构不是作用在具体得属性名上，而是作用在值得内部位置上，根据位置进行赋值。 如：

    let arr = ['姓名', '年龄'];
    let [name, age] = arr;
    console.log(name, age); // 姓名 年龄

取出指定位置的值

如果我们只想取第二个或者第三个值，那么只需要把需要取值得前几位进行占位就可以了。如：

    let arr = ['姓名', '年龄'];
    let [, age] = arr;
    console.log(age); //  年龄

默认值

数组解构中同样支持没有取到值时设置默认值。如：

    let arr = ['姓名', '年龄'];
    let [, age, sex = '性别'] = arr;
    console.log(age, sex); //  年龄 性别

嵌套得解构

数组嵌套得解构和单个解构类似，只需要在解构得位置插入[]就可以。如：

    let arr = ['姓名', ['年龄']];
    let [, [age], sex = '性别'] = arr;
    console.log(age, sex); //  年龄 性别

数组解构的剩余项

前面得值进行解构后，可以使用 … 语法来将剩余的项目赋值给一个指定的变量，这个变量为没有解构得剩余值组成得数组。注意：剩余解构变量只能放在最后面。例如：

    let arr = ['姓名', '年龄', '性别'];
    let [name, ...data] = arr;
    console.log(name, data); //  姓名 ["年龄", "性别"]

利用数组解构交换两个变量得值

在es5得时候交换两个变量需要声明第三个变量，作用中间层来实现，使用数组解构赋值来实现就不需要声明其他得变量了。如：

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

三、混合解构

在我们平时开发中，接口返回得数据经常是对象和数组进行嵌套返回得，解构赋值同样也可以进行混合嵌套解构。例如：

    let obj = {
        name: {
            nameOne: '姓名One',
            nameTwo: '姓名Two' 
        },
        age: ['年龄1', '年龄2']
    };
    let {
        name: { nameOne },
        age: [age1]
    } = obj;
    console.log(nameOne, age1); // 姓名One 年龄1