ES6功能扩展-解构赋值
解构是一种打破原有数据结构，将其拆分为更小部分的过程
对象解构
在ES5中，开发者们为了从对象中获取特定数据并赋值给变量，通常是这样做
var obj = {
name: 'wmui',
age: 10
}
var name = obj.name, age = obj.age;
在ES6中，利用解构功能，可以这样做
let obj = {
name: 'wmui',
age: 10
}
let {name, age} = obj;
类似于对象字面量语法的形式，只不过放到了赋值操作符的左边
可以使用解构功能为变量赋值，它会覆盖之前的变量值
let obj = {
name: 'wmui',
age: 10
}
let name = 'wang', age = 20;
({name, age} = obj);
console.log(name,age) // wmui 10
注意： 一定要用一对小括号包裹解构赋值语句，JS引擎将一对开放的花括号视为一个代码块。语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值过程
默认值
使用解构赋值表达式时，如果指定的变量名称在对象中不存在，这个变量会被默认赋值为undefined
let obj = {
name: 'wmui',
age: 10
}
let {name, age, sex} = obj;
console.log(sex) // undefined
当指定的属性不存在时，可以定义一个默认值，在属性名称后添加一个等号和相应的默认值即可。
let obj = {
name: 'wmui',
age: 10
}
let {name, age, sex = 'boy'} = obj;
console.log(sex) // boy
重命名
如果希望使用不同命名的变量存储对象属性的值，在属性名称后添加一个冒号和新的属性名即可。
let obj = {
name: 'wmui',
age: 10
}
let {name: myName, age: myAge} = obj;
console.log(myName,myAge); // wmui 10
使用不同的变量名也可以设置默认值
let obj = {
name: 'wmui',
age: 10
}
let {name: myName, age: myAge, sex: mySex = 'boy'} = obj;
console.log(myName,myAge,mySex); // wmui 10 boy
嵌套对象解构
嵌套的对象也可以使用解构赋值，同样与对象字面量的语法相似
let obj = {
name: 'wmui',
age: 10,
test: {
a: {
start: 2010,
end: 2011
},
b: {
start: 2013,
end: 2015
}
}
}
let {test: {a}} = obj;
console.log(a.start) // 2010
console.log(a.end) // 2011
嵌套对象同样可以使用不同的变量名字存储对象属性的值
let obj = {
name: 'wmui',
age: 10,
test: {
a: {
start: 2010,
end: 2011
},
b: {
start: 2013,
end: 2015
}
}
}
let {test: {a: aa}} = obj;
console.log(aa.start) // 2010
console.log(aa.end) // 2011
数组解构
数组的解构比对象简单，数组的解构使用的是数组字面量方式，解构操作在数组内部完成。
let colors = ['red','green','blue'];
let [firstColor,secondColor] = colors;
console.log(firstColor) // red
console.log(secondColor) // green
占位符
在解构模式中，可以通过提供逗号占位符来省略元素，只获取自己需要的元素
let colors = ['red','green','blue'];
let [,,thirdColor ] = colors;
console.log(thirdColor ) // blue
解构赋值
数组的解构也可用于赋值上下文，和对象不同的是，它不需要小括号包裹成表达式
let colors = ['red','green','blue'];
let firstColor = 'black', secondColor = 'white';
[firstColor, secondColor] = colors;
console.log(firstColor,secondColor ) // red green
默认值
可以在数组解构赋值表达式中为数组中的任意位置添加默认值，当指定位置的属性不存在或其值为undefined时使用默认值
let colors = ['red'];
let [ firstColor, secondColor = 'green' ] = colors;
console.log(firstColor); // red
console.log(secondColor); // green
嵌套数组解构
嵌套数组的解构只需要在原有数组模式中插入另一个数组模式即可
let colors = ['red', ['green', 'lightgreen'], 'blue'];
let [ firstColor, [ secondColor ] ] = colors;
console.log(secondColor); // green
不定元素
在数组中可以通过...语法，把数组中的其余元素赋值给一个特定的变量
let colors = ['red', 'green', 'blue'];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // red
console.log(restColors.length); // 2
console.log(restColors[0]); // green
console.log(restColors[1]); // blue
可以利用不定元素实现数组复制
let colors = ['red', 'green', 'blue'];
let [...copyColors] = colors;
console.log(copyColors) // ['red', 'green', 'blue']
其他解构
字符串解构
字符串也可以解构赋值，这是因为字符串被转换成了一个类数组对象
const [a, b, c, d, e] = 'hello';
console.log(a); //"h"
类数组对象有一个length属性，可以对这个属性解构赋值
const {length}= 'hello';
console.log(length) // 5
数值和布尔值解构
解构数值和布尔值时，会先将它们转换成对象，所以可以解构它们自身或继承的属性和方法
let {toString:s1} = 123;
console.log(s1 === Number.prototype.toString);//true
let {toString:s2} = true;
console.log(s2 === Boolean.prototype.toString);//true
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错
