ECMAScript 6 新增了对象解构语法,可以在一条语句中使用嵌套数据实现一个或多个赋值操作。简单地说,对象解构就是使用与对象匹配的结构来实现对象属性赋值。


    1. // 不使用对象解构
    2. let person = {
    3. name: 'Matt',
    4. age: 27
    5. };
    6. let personName = person.name,
    7. personAge = person.age;
    8. console.log(personName); // Matt
    9. console.log(personAge); // 27
    1. // 使用对象解构
    2. let person = {
    3. name: 'Matt',
    4. age: 27
    5. };
    6. let { name: personName, age: personAge } = person; //运用对象解构
    7. console.log(personName); // Matt
    8. console.log(personAge); // 27

    1. 使用解构,可以在一个类似对象字面量的结构中,声明多个变量,同时执行多个赋值操作。如果想让变量直接使用属性的名称,那么可以使用简写语法
    2. let person = {
    3. name: 'Matt',
    4. age: 27
    5. };
    6. let { name, age } = person;
    7. console.log(name); // Matt
    8. console.log(age); // 27

    解构赋值不一定与对象的属性匹配。赋值的时候可以忽略某些属性,而如果引用的属性不存在,则该变量的值就是 undefined:

    1. let person = {
    2. name: 'Matt',
    3. age: 27
    4. };
    5. let { name, job } = person; //对象中没有job
    6. console.log(name); // Matt
    7. console.log(job); // undefined

    也可以在解构赋值的同时定义默认值,这适用于前面刚提到的引用的属性不存在于源对象中的情况:

    1. let person = {
    2. name: 'Matt',
    3. age: 27
    4. };
    5. let { name, job='Software engineer' } = person; //直接在解构中定义
    6. console.log(name); // Matt
    7. console.log(job); // Software engineer