解构是什么
解构(destructuring assignment)是一种表达式，将数组或者对象中的数据赋给另一变量。
在开发过程中，我们经常遇到这样问题，需要将对象某个属性的值赋给其它两个变量。代码如下:
var person = {
name:'xxxx',
age: 20,
hobby:['football', 'run']
}
var a = person.name;
var hobby = person.bobby;有了解构，我们可以精简代码了
var person = {
name:'xxxx',
age: 20,
hobby:['football', 'run']
}
let {a, hobby} = person;
let [first] = person.hobby;数组解构
let nums = [1,2,3]
let [f,s] = nums;
console.log(f); // 输出： 1
console.log(s); // 输出： 2将数组中前两项的值分别赋给f和s
变量值交换
[f, s] = [s, f];
console.log(f); // 输出： 2
console.log(s); // 输出： 1使用...创建剩余变量
let nums= [1,2,3,4]
let [f, ...rest] = nums;
console.log(f); // 输出： 1
console.log(rest);// 输出： [2,3,4]忽略数组中某些元素
let [first] = [1, 2, 3, 4];
console.log(first); // 输出： 1
let [, second, , fourth] = [1, 2, 3, 4];对象解构
let o = {
a: "foo",
b: 12,
c: "bar"
}
let { a, b } = o;
console.log(a); // 输出： foo
console.log(b);// 输出： 12将对象o.a赋值给a,0.b赋值给b，这里的a,b都是对象属性名且必须一致，而属性c则会忽略
重命名
上述例子中声明的变量a和b必须和对象中属性一致，如果想换一个名字，写法如下：
let { a: aa, b: bb } = o;默认值
let o = {
a: "foo",
b: undefined,
c: "bar"
}
let {a, b=1}= o;
console.log(a); // 输出： foo
console.log(b);// 输出： 1当属性b的值为undefined时，解构表达式会使用默认值
展开
展开和解构正好相反，将一个数组展开为另一个数组，或将一个对象展开为另一个对象。
数组展开
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
console.log(bothPlus);// 输出：0,1,2,3,4,5展开操作会对数组first和second浅拷贝，如果fisrt值修改，则bothPlus值不会改变。但是如果first中是对象数组，改变对象内部的值，bothPlus对应的值会改变。
对象展开
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };
console.log(search); //输出：{food: "rich", price: "$$", ambiance: "noisy"}展开是从做到右处理，意味着对象后面的属性会覆盖前面的。如下：
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search = {food: "rich", ...defaults };
console.log(search); //输出：{food: "spicy", price: "$$", ambiance: "noisy"}注意：使用...创建展开，请使用[email protected]版本