前言
ES6中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。
使用解构赋值可以将复杂的代码整理的更加干净整洁。
解构对象
在没有使用解构之前，想要确定对象中的某些属性，那么就需要从对象中获取属性然后赋值给变量，这样会让代码显得非常冗余。
let obj = { name: "张三", age: 22 };
let name = obj.name;
let age = obj.age;
// 张三 22
console.log(name, age);
// 张三 22
console.log(obj.name, obj.age);
1
2
3
4
5
6
7
8
基本解构格式
如果使用解构的话，保持将变量名和对象属性名同名才可取到值。
let { name, age } = { name: "张三", age: 22 };
// 张三 22
console.log(name, age);
1
2
3
4
变量别名
如果解构的对象中，属性名和外部的变量名重名，将会报错，可以使用别名的方式进行解构。
let name = "王五";
let { name: newName, age } = { name: "张三", age: 22 };
// 张三 22
console.log(newName, age);
1
2
3
4
5
变量默认值
如果目标对象属性中没有要解构的属性，不指定默认值，那么将会undefined，此时可以给解构变量写默认值。
let { name, age, gender = "男" } = { name: "张三", age: 22 };
// 张三 22 男
console.log(name, age, gender);
1
2
3
4
此种为变量设置默认值的方法，常应用于函数参数中，加入调用函数时没传递参数，有可能会对函数运行造成错误。那就可以在形参位置进行对象解构，对变量指定默认值。
function fn({ name = '李四', age = 30 } = {}) {
// 李四 30
console.log(name, age);
}
fn();
1
2
3
4
5
6
解构数组
解构数组和对象有些不同，解构对象的时候属性前后位置不影响。但是解构数组，需要按照索引顺序解构。
数组基础解构用法
如果在没有解构之前，需要拿到数组中的前3位字符串，那么只能按照索引值的方式定义变量。
let arr = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];
let str1 = arr[0];
let str2 = arr[1];
let str3 = arr[2];
// HTML5 JavaScript Vue
console.log(str1, str2, str3);
// HTML5 JavaScript Vue
console.log(arr[0], arr[1], arr[2]);
1
2
3
4
5
6
7
8
9
解构赋值
let [str1, str2, str3] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];
// HTML5 JavaScript Vue
console.log(str1, str2, str3);
1
2
3
4
基于这种特性，如果一次性想要定义多个变量，就可以使用这种解构的方式定义。相当于一次性定义了三个变量并对变量进行了赋值。
选择解构
数组的特性是按照索引值顺序执行，如果只要取得数组最后几位，或者第几位，需要预留出其他值的位置。
let [, , , value1, value2] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];
// React NodeJS
console.log(value1, value2);
1
2
3
4
扩展运算符
在一个数组中解构，可以取得数组第一位，剩下的通过扩展运算符(展开运算符)，统一放置到一个数组中。
let [value, ...other] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];
// HTML5 ["JavaScript", "Vue", "React", "NodeJS"]
console.log(value, other);
1
2
3
4
默认值
同上面对象别名方式一致。
let [v1, v2, v3 = "Vue"] = ["HTML5", "JavaScript"];
// HTML5 JavaScript Vue
console.log(v1, v2, v3);
1
2
3
4
交换变量值
let name1 = "张三";
let name2 = "李四";
[name2, name1] = [name1, name2];
// 李四 张三
console.log(name1, name2);
1
2
3
4
5
6
7
解构混用
在实际开发中基本没有上面那种简单的结构，大多数都是比较复杂的数据结构。用好了解构赋值才会让代码看起来更加整洁。
let person = {
name: "坤坤",
age: 25,
like: ['唱', '跳', 'rap', '篮球'],
works: {
music: ['Wait Wait Wait', '鸡你太美'],
movies: ['童话二分之一', '鬼畜区常青树']
},
friend: ['丞丞', '大宝贝', '大黑牛']
};
1
2
3
4
5
6
7
8
9
10
传统型
let result = person.works.music[1];
// 鸡你太美
console.log(result);
1
2
3
4
浅层解构
let { works } = person;
// 鸡你太美
console.log(works.music[1]);
1
2
3
4
连续解构
let { works: { music } } = person;
// 鸡你太美
console.log(music[1]);
1
2
3
4
数组与对象混用
let { works: { music: [, result] } } = person;
// 鸡你太美
console.log(result);
1
2
3
4
解构+别名
let { works: { music: [, result], movies: newMov } } = person;
// 鸡你太美 ["童话二分之一", "鬼畜区常青树"]
console.log(result, newMov);
