解构是 ES 6 的一种语法规则，可以将一个对象或数组的某个属性提取到某个变量中。

在以前，我们要将一个变量中的属性保存到外部来，我们一般会使用以下的方式：

const obj = {
	name:"张三",
	age:12,
	sex:"男"
}
const name,age,sex;
name = obj.name;
age = obj.age;
sex = obj.sex;

这其实很麻烦，我们可以使用以下的方式来简化这种写法

const obj = {
	name:"张三",
	age:12,
	sex:"男"
}
const name,age,sex;
({name,age,sex} = obj);

这个写法和上面的其实一模一样。

注意，小括号必不可缺，否则会报错。

实际上，我们更喜欢用下面的写法

const obj = {
	name:"张三",
	age:12,
	sex:"男"
}
const {name,age,sex} = obj;

这样写了就不用加上小括号了，实际上，解构本质上就是一个语法糖。

如果解构的时候，没有同名属性则会返回一个 undefined。

有时候在没有同名属性的前提下，我希望给他一个默认值，语法也很简单

const obj = {
	name:"张三",
	age:12,
	sex:"男"
}
const {name,age,sex,test = 2} = obj;
console.log(test);//2

我们还可以取别名

const obj = {
	name:"张三",
	age:12,
	sex:"男"
}
const {name:myName,age,sex} = obj;
console.log(myName);//此时解构出来的变量就保存在myName中

const obj = {
	name:"张三",
	age:12,
	sex:"男"
}
const {abc:aaa = 123,age,sex} = obj;
console.log(aaa);//输出123，此时解构obj中的abc属性，由于没有，给了默认值123，解构出来的变量赋值给aaa

我们还可以进行嵌套解构

const obj = {
	name:"张三",
	age:12,
	sex:"男",
	address:{
		province:"四川"
	}
}
const {name,age,sex,address:{province}} = obj;
console.log(province);//输出四川

嵌套解构也使用冒号，只不过这个冒号的含义就不再是取别名了，而是嵌套解构。

对象的解构还有一点是对剩余项的解构

const user = {
	name:"张三",
	age:12,
	sex:"男",
	address:{
		province:"四川"
	}
}

const {name,...obj} = user;

此时将会把对象中的 name 属性赋值到外面的 name 变量中去，同时，会将除了 name 属性之外所有的属性，全部收集到一个新的对象中，这个对象的名字为 obj，此时这三个点在这里的作用其实也就是收集剩余参数。