ES6的解构都听说过，多多少少都用过，那就来记录记录解构到底怎么用才能6得飞起。
解构：使用es6的语法规则，将一个对象或数组的属性提取到某个变量中。
1. 对象的解构
const obj = {
name: "zhangsan",
age: 18,
address:{
city: 'hangzhou',
country: 'china',
}
};
比如上面的内容，以前我们要多次使用某个属性的时候，只能重新定义：
let name, age;
name = obj.name;
age = obj.age;
解构就是先定义同名变量，再把同名的属性拿出来。
let name, age;
({ name, age } = obj);
//语法糖
const { name, age, address } = obj;
console.log("name", name);
那比如说我解构一个sex属性，那会是啥情况？我们看他的规则哈，这是先定义，再取出，所以不会报错，这个sex的值就是undefined。
有的时候，我们希望这个解构的属性有个默认值，那就在解构的时候直接赋值就可以了。
const { name, age, sex = "male" } = obj;
咳咳咳，那如果我们解构的属性和对象的属性不同名怎么办？赋值就好了。
//先声明 name ange gender 三个变量，然后从对象里把sex赋值给gender
const { name, age, sex:gender } = obj;
又要有默认值怎么办？照样子写呗。
const { name, age, sex: gender = "male" } = obj;
那如果要解构的比较深，比如city呢？
const {
sex: gender = "male",
address: { city },
} = obj;
这样就可以了，其实这是声明了两个变量name，city。把address.city给了city。
2.数组的结构
了解了数组的本质后呢，数组的解构就很好入手了。数组的本质还是对象，数组的key就是下标嘛。
比如说这么一个数组。
const arr = [0, 2, 4, 5];
那就解呗，
const{0,1,2}=arr; error
这样？ 不行啊，0,1,2不是一个合法的标识符，所以不能用作变量名字，那就重新定义呗。
const { 0: n1, 1: n2, 2: n3 } = arr; //success
上面用的是对象语法糖，标准解构语法应该是这样的：
PS: 这时候不是什么同名属性了，而是按顺序给变量赋值
let n1, n2, n3, n4;
[n1, n2, n3, n4] = arr;
所以，数组的解构语法糖是这样的：
const [n1, n2, n3] = arr;
那如果想拿第一项和第三项，则第二项留空就可以了。
const [n1, , n3] = arr;
那默认值是和对象一样，直接赋值就可以了。当然了，还可以拿嵌套的。
- 嵌套数组。
const arr = [0, 2, 4, [1, "gg"]];
const [, , , [, n]] = arr;//第四项里的第二项
- 嵌套对象。
const arr = [0, 2, 4, { a: "g", b: "rr" }];
const [, , , { b }] = arr;//第四项里的b属性
//当然还可以这么拿
const { b } = arr[3];
3.剩余项的解构
有这么个需求，我要把源对象的name拿出来，剩余的属性放到一个新对象了。
const user = {
name: "zhangsan",
age: 18,
sex: "male",
address: {
city: "hangzhou",
country: "china",
},
};
const { name, ...obj } = user; //使用展开运算符
同样的，把数组的前两项解构出来，剩余项放到一个新数组里。
const arr = [1, 2, "b", "c"];
const [a, b, ...strs] = arr;
PS: 剩余项必须是后面的项
- 例：
const article = {
title: "文章标题",
content: "文章内容",
comments: [
{
content: " 评论1",
user: {
id: 1,
name: "张三",
},
},
{
content: " 评论2",
user: {
id: 2,
name: "李四",
},
},
],
};
有这个一组数据，要求解构出 第二条用户名和评论内容。
//解法很多啊，只要知道数组和对象的解法，一层一层找
const {
comments: [
,
{
content,
user: { name },
},
],
} = article;
const [
,
{
content,
user: { name },
},
] = article.comments;
const {
content,
user: { name },
} = article?.comments[1];
4.解构传参
这个解构经常是和函数配合哈，我们函数接受一个对象参数，经常是需要用到那个对象里的属性，那使用解构是最方便的。
function print(obj) {
const {
name,
address: { city },
} = user;
}
另外，比如在后端请求接口那里，我们需要传一个type或其他什么的，也有不传的时候，这时用解构就方便了。
function getData({ type = 1 } = {}) {
const data = { type };
console.log("data", data);
}
getData({ type: 4, name: "张三" });
这种就是我不管你传了多少，我挑出来我想要的，只用我想要的数据去发请求。这是在js里经常遇到的，多人开发的时候，对接口不熟悉或者对类型没过分要求时。但是在ts里不会出现乱传了，一般传的都是请求所需要的，在xx.d.ts声明文件里配好了。
