概述
ES6中的解构特性是一种针对数组或者对象进行模式匹配，方便我们从对象或者是数组中取值。
优点：代码书写简洁高效、可读性强。
对象解构
基础解构
let {name, age} = user 就是一个简单的数据解构过程，右边如果是对象,左边解构的语法也要用对象格式。
通过解构赋值的方式从等号右边user对象中解构出name和age属性，并赋值给了局部变量name和age。然后就可以直接使用name和age来进行其他操作。
注：解构出来的变量 一定要是 对象中能够查找到的属性名，如果解构出来的属性在对象中查找不到，值为undefined
// 传统方式获取对象属性值方式
let user = {
name:'小明',
age:18
}
console.log(user.name,user.age) // 小明 18
//ES6解构赋值
let user = {
name:'小明',
age:18
}
let {name, age} = user // 解构赋值
console.log(name, age) // 小明 18
解构默认值
正常情况下当我们请求后台接口返回的数据包含name,age,sex三个属性时，由于数据缺省值为空的情况下，后端可能不会返回值为空的属性，这种场景下前端调用会出现undefined。当在这种特殊场景下前端设置解构默认值后，即可在拿不到对应属性值时显示默认值。
//ES6解构赋值
let user = {
name:'小明',
age:18
}
let {name, age, sex} = user // 解构属性不存在时，值为undefined
console.log(name, age,sex) // 小明 18 undefined
// ES6解构赋值，并设置默认值
let user = {
name:'小明',
age:18
}
let {name='小明', age=18, sex='男'} = user // 解构赋值设置默认值
console.log(name, age,sex) // 小明 18 男
数组解构
基础解构
使用var/let/const声明的变量用中括号包裹，变量的值对应等号后边数组对象中的索引位置上的元素值。
如果只想要其中某个索引位置的元素值，我们可以在之前的索引位置用逗号隔开留空即可。
// 当我们想获取值为'鱼'的时候
let pet = ['猫','狗','鱼']
//传统方式
console.log(pet[2])
//ES6解构赋值
let [,,thirdPet] = pet
console.log(thirdPet)
解构默认值
参考对象解构默认值
//ES6解构赋值
let [cat,dog,fish,horse] = ['猫','狗','鱼']
console.log(cat, dog,fish,horse) // 猫 狗 鱼 undefined
// ES6解构赋值，并设置默认值
let [cat,dog,fish,horse='马'] = ['猫','狗','鱼'] // 解构赋值设置默认值
console.log(cat, dog,fish,horse) // 猫 狗 鱼 马
嵌套数组解构
参考一维数组的方式，当多维数组解构时，按多维数组的结构来申明变量结构。
//ES6解构赋值
let pet = ['猫',['哈士奇','中华田园犬'],'鱼']
let [cat,dog] = pet
let [,[firstDog]] = pet
console.log(dog) // ["哈士奇", "中华田园犬"]
console.log(firstDog) // 哈士奇
剩余元素解构
我们可以通过使用...展开运算符把数组的多个元素一起赋值给某个变量。
注意：展开运算符必须是用在解构申明的最后一个变量，后面如果再申明其他变量，会抛出语法错误。
//ES6解构赋值
let pet = ['猫',['哈士奇','中华田园犬'],'鱼']
let [firstPet,...residuePet] = pet
console.log(firstPet) // 猫
console.log(residuePet) // [["哈士奇", "中华田园犬"],'鱼']
函数解构
不论是对象解构还是数组解构，比较常见的应用场景是函数解构传参。
例如：
let user = {
name:'小明',
age:18,
sex:'男'
}
// 传统方式
function log(user){
console.log(user.name, user.age) // 小明 18
}
// ES6解构赋值
function log({name,age} = user){
console.log(name, age) // 小明 18
}
log(user)
