作用
拆分数据解构，更方便的提取数据片段。
对象解构
声明变量
使用解构声明变量必须初始化
ES5
const obj = {
name: 'lee',
age: 18
}
let name = obj.name;
let age = obj.age;
ES6
const obj = {
name: 'lee',
age: 18
}
let { name, age } = obj;
赋值变量
const obj = {
name: 'lee',
age: 18
}
let name = 'hello';
let age = 7;
({ name, age } = obj);
默认值
如果指定的变量名称在对象中不存在，则赋值undefined
const obj = {
name: 'lee',
age: 18
}
let { name, age, gender } = obj;
console.log(gender); // undefined
当指定的属性不存在时，可以定义默认值
默认值在对象上没有该属性或该属性为undefined时生效
const obj = {
name: 'lee',
age: 18
}
let { name, age, gender = 'male' } = obj;
console.log(gender); // 'male'
别名(非同名局部变量)
取:左边的属性值存储在:右边的变量中
const obj = {
name: 'lee',
age: 18
}
let { name: myName, age: myAge } = obj;
console.log(name); // 空
console.log(myName); // 'lee'
嵌套
在解构中使用花括号{}，意为在找到花括号{}前的属性后，应该继续深入一层查找花括号{}中的属性
const obj = {
person: {
head: {
eyes: 2,
mouth: 1
},
body: {
arms: 2,
legs: 2
}
}
}
let { person: {head} } = obj;
console.log(head.eyes); // 2
数组
声明变量
let colors = ['red', 'green', 'blue'];
let [firstColor, secondColor] = colors;
console.log(firstColor); // 'red'
赋值变量
let colors = ['red', 'green', 'blue'];
let firstColor = 'black';
let secondColor = 'purple';
[firstColor, secondColor] = colors;
console.log(firstColor); // 'red'
默认值
当指定位置的属性不存在或者其值为nudefined时使用默认值
let colors = ['red'];
let [firstColor, secondColor = 'green'] = colors;
console.log(secondColor); // 'green'
嵌套
let colors = ['red', ['green'] ];
let [firstColor, [secondColor] ] = colors;
console.log(secondColor); // 'green'
交换两个值
ES5
let a = 1,
b = 2,
temp;
temp = a;
a = b;
b = temp;
ES6
let a = 1,
b = 2;
[a, b] = [b, a];
不定元素
let colors = ['red', 'green', 'blue'];
let [firstColor, ...restColors] = colors;
console.log(restColors); // ['green', 'blue']
