ES6对象解构和数组解构之基础理解

一、对象解构

（1）、理解：对象字面量的语法形式是在一个赋值操作符（=）左边放置一个对象字面量。

 let person = { name: 'zhangsan', age: 20 }; 
 let { name, age, sex } = person;
 console.log(name); // 'zhangsan' 
 console.log(age); // 20
 console.log(sex); // undefined

 let {name: myName, age: myAge} = person; // myName myAge 属于别名
 console.log(myName); // 'zhangsan' 
 console.log(myAge); // 20

在这段代码中，person.name的值被存储在名为name的变量中；person.age的值被存储在名为age的变量中。使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined。解构后的结果：name='zhangsan'，age=20，sex=undefined。

（2）、将对象解构应用到了变量的声明中。然而，我们同样可以在给变量赋值时使用解构语法。

const name = 'jack', age = 24;
const person = { name: 'li hua', age: 18 };

// 使用解构来分配不同的值
({ name, age } = person);

console.log(name); // "li hua"
console.log(age); // 18

在这段代码中，声明变量name和age时初始化了一个值，在({ name, age } = person);，通过解构赋值的方法，从person对象读取相应的值重新为这两个变量赋值。解构赋值后的结果：name='li hua'，age=18。

（3）、构解构嵌套对象仍然与对象字面量的语法相似，可以将对象拆解以获取想要的信息

const father= {
    name: 'father',
    age: 666,
    son: {
        child: {
            name: 'child',
            age: 3,
        }
    }
};
let { son: { child } } = father;
console.log(child.name); // "child"
console.log(child.age); // 3

在这段代码中，我们在解构模式中使用了花括号，其含义为在找到father对象中的son属性后，应当深入一层继续查找child属性。在上面的解构示例中，所有冒号前的标识符都代表在对象中的检索位置，其右侧为被赋值的变量名；如果冒号后是花括号，则意味着要赋予的最终值嵌套在对象内部更深的层级中。

二、数组解构

（1）、理解：定义一个数组，然后按照对应的位置，提取值，对变量赋值。它使用的是数组字面量，且解构操作全部在数组内完成。

 const num = [1, 2, 3];
 const [a, b, c] = num ;
 console.log(a)     // a=1
 console.log(b)     // b=2
 console.log(c)     // c=3

在这段代码中，我们从num数组中解构出了"1"、"2"、"3"这三个值，并分别存储在变量a,b,c中。解构后的结果：a=1，b=2，c=3。如果解构不成功，变量的值为undefined。

（2）、在解构模式中，也可以直接省略元素，只为感兴趣的元素提供变量名。

const people = [ "lisa", "jack", "lucy" ];
const [ , , thirdPerson] = people;
console.log(thirdPerson);  // "3"

这段代码使用解构赋值语法从people中获取第3个元素，thirdPerson前的逗号是前方元素的占位符，无论数组中的元素有多少个，都可以通过这种方法提取想要的元素，不需要为每一个元素都指定变量名。

（3）、在 ES6 中变量值交换，直接用解构赋值就好，不用再跟以前一样还要设计一个中间变量。

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

在代码执行过程中，先解构右边临时数组，将b和a的值复制到左侧数组的前两个位置，最终结果是变量互换了它们的值。