es6提供了一个非常好的特性，即变量的解构赋值。从而我们可以方便的从数组和对象中提取数据并将它们赋值给变量。这是非常必要的。先来看在这个新特性发布之前我们是如何从数组中提取数据的。如下：
let nums = [1,2,3,4,5];
let num1 = nums[0];
let num2 = nums[1];
console.log(num1); // logs 1
console.log(num2); // logs 2
为了从 nums 数组中提取到数据，我们多次重复着相同的代码。es6的解构赋值将会让这个操作变得非常的容易且易于理解。
数组的解构赋值
从数组中取值并按照对应位置对变量进行赋值。如下：
let [num1,num2,num3] = [1,2,3];
console.log({num1},{num2},{num3})
<img src="https://user-gold-cdn.xitu.io/2020/4/8/17158daa93feba26?w=697&h=65&f=jpeg&s=14786"/>
“模式匹配”赋值
这属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
let [num_s,nums,num_e] = [1,[2,3,4],5];
console.log(num_s) // logs 1
console.log(nums) // logs [2,3,4]
console.log(num_e) // logs 5
用逗号跳过元素
let [num1,,,num4] = [1,2,3,4];
console.log(num1) // logs 1
console.log(num4) // logs 4
let [,num2,,num4] = [1,2,3,4];
console.log(num2) // logs 2
console.log(num4) // logs 4
查看变量赋值左侧的数组。注意这里不是只有一个逗号，而是三个。逗号分隔符用于跳过数组中的值。所以如果你想要跳过数组中的一个项，只要用逗号就可以了。
数组中的其余部分的赋值
如果我们想将数组中的一些元素赋值给变量，而将数组中的其余元素存为一个数组赋值给指定的变量怎么办？在这种情况下，我们可以这样做：
let [num1,...nums] = [1,2,3,4];
console.log(num1) // logs 1
console.log(nums) // logs [2,3,4]
应用这种方式，你可以轻松的把剩余的元素赋值给一个指定的变量。
解构失败，赋值undefined
let [num1] = [];
let [num2, num3] = [1];
console.log(num1) // logs undefined
console.log(num3) // logs undefined
代码中的变量num1与变量num3 按照模式匹配原则，并没有对应的值与之匹配，故而返回undefined。而变量num2 按照模式匹配原则，被赋值为2。
函数的解构赋值
解构赋值还可以从函数返回的数组中提取数据。假设我们有一个返回数组的函数，如下例所示：
function getLists() {
let lists = [1,2,3,4,5]
return lists;
}
let [num1,...nums] = getLists();
console.log(num1); // logs 1
console.log(nums); // logs [2,3,4,5]
使用默认值
数组的解构赋值可以给变量设定默认值，以防万一从数组中提取的值是 undefined（防止解构失败的情况）
let [name = "暂无姓名",sex = "女"] = ["April"];
console.log(name); // "April"
console.log(sex); // "女"
代码中变量name 默认的值为 "暂无姓名" 但是按照左右模式匹配的原则,name 被赋值为 "April" ,因为变量sex并未匹配到值，所以它的值依旧是默认值"女"。
注意点1：ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
let [num1 = 1] = [undefined];
console.log(num1) // logs 1
let [num2 = 2] = [null];
console.log(num2) // logs null
代码中，因为null不严格等于undefined，默认值就不会生效。故而输出了 null
注意点2：如果默认值是函数，这个函数就会非常的懒，即只有在用到的时候，才会执行函数。
function getLists(){
let lists = [1,2,3,4,5]
return lists;
}
let [lists = getLists()] = [1];
console.log(lists) // logs 1
// 因为变量 lists 可以匹配到值，所以函数 getLists() 并不会执行。
function getLists(){
let lists = [1,2,3,4,5]
return lists;
}
let [lists = getLists()] = [];
console.log(lists) // logs [1,2,3,4,5]
// 因为变量 lists 无法匹配到值，函数 getLists() 就会执行。故而返回数据 [1,2,3,4,5]
注意点3：默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = []; // logs x=1; y=1
let [x = 1, y = x] = [2]; // logs x=2; y=2
let [x = 1, y = x] = [1, 2]; // logs x=1; y=2
let [x = y, y = 1] = []; //logs 这就要报错啦，因为x用y做默认值时，y还没有声明。
交换变量
let num1 = 1;
let num2 = 2;
[num1,num2] = [num2,num1];
console.log({num1}); // logs 2
console.log({num2}); // logs 1
对象的解构赋值
为什么要用对象的解构赋值呢？？
let profiles = {
name:'April',
nickname:"二十七刻",
sign:"不以物喜，不以己悲。"
}
let name = profiles.name;
let nickname = profiles.nickname;
let sign = profiles.sign;
console.log({name}) // "April"
console.log({nickname})// "二十七刻"
console.log({sign}) // "不以物喜，不以己悲。"
假设我们要从对象profiles中获取数据并赋值给新变量。就得不断的重复着取值与赋值。代码冗长且不利于维护。利用对象的解构赋值，就不存在这一问题了。
同属性名赋值
对象的解构赋值变量必须与属性同名，才能取到正确的值。如下：
let profiles = {
name:'April',
nickname:"二十七刻",
sign:"不以物喜，不以己悲。"
}
let {name,nickname,sign} = profiles;
console.log({name}) // logs "April"
console.log({nickname})// logs "二十七刻"
console.log({sign}) // logs "不以物喜，不以己悲。"
解构失败，赋值undefined
let profiles = {
name:'April',
nickname:"二十七刻",
sign:"不以物喜，不以己悲。"
}
let {name,sex} = profiles;
console.log(name) // logs "April"
console.log(sex) // logs undefined
上面代码中，因为profiles对象没有 sex属性，所以变量sex取不到值，所以就赋值undefined。
在赋值之前申明变量
在对象的解构赋值中，变量可以在赋值之前申明。如下：
let profiles = {
name:'April',
nickname:"二十七刻",
sign:"不以物喜，不以己悲。"
}
let name,nickname,sign;
{name,nickname,sign} = profiles;
console.log(name) // logs Error : "Unexpected token ="
嘿呀～报错了！为什么？？？
原因：因为忘记在{}外层写()了。
注意1 ：当使用没有声明的对象字面量解构赋值时，必须使用()的赋值语句。因为 JavaScript 引擎会将{name,nickname,sign}理解成一个代码块，而不是对象字面量。
注意2 ：使用此语法时，上一行代码一定要以;结束掉，否则的话会被当作函数，执行上一行的代码。
就是这个奇怪的语法 :({} = '');
正确的做法如下：
let profiles = {
name:'April',
nickname:"二十七刻",
sign:"不以物喜，不以己悲。"
}
let name,nickname,sign;
({name,nickname,sign} = profiles);
console.log({name},{nickname},{sign})
// logs {name: "April"} {nickname: "二十七刻"} {sign: "不以物喜，不以己悲。"}
使用新的变量名
如果我们想用新的变量名来替代对象的属性名怎么办呢？代码如下：
let profiles = {
name:"April",
age:"27"
}
let {name:userName,age:userAge} = profiles;
console.log(userName) // logs "April"
console.log(userAge) // logs "27"
由此可知，对象的解构赋值其实就是let {name:name,age:age} = {name:"April",age:"27"}代码的简写。也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
上面代码中，name是匹配的模式，userName才是变量。真正被赋值的是变量userName，而不是模式name。
使用默认值
对象的解构赋值可以给变量设定默认值，以防万一从对象中获取的值是 undefined（防止解构失败的情况）需要注意的是：默认值生效的条件是，对象的属性值严格等于undefined。
let staff = {name: "April", country: "China", job: "Developer"};
let {name = "暂无姓名", age = "暂无年龄"} = staff;
console.log({name}); // logs "April"
console.log({age}); // logs "暂无年龄"
代码中变量name的默认值为“暂无姓名”,但是对象staff中有属性为name的字段，所以就被赋值April,而对象staff中并没有age这个属性，所以被赋值为"暂无年龄"，取了它自己的默认值。
计算属性名称
计算属性名是另一个对象特性，也适用于对象的解构赋值。你可以通过一个表达式指定一个属性的名称，把它放在[]中，如下：
let staff = {name: "April", country: "China", job: "Developer"};
let prop = "name";
let {[prop]: name} = staff;
console.log({name}); // logs "April"
对象中的其余部分的赋值
解构运算也可以被应运到解构赋值当中，来获取那些还没有被赋值的键值对，这些键值对都被放在一个新的对象里。如下：
let staff = {name: "April", country: "China", job: "Developer",nickname:"二十七刻"};
let {country,...infos} = staff;
console.log(country) //logs "China"
console.log(infos) // logs {name: "April", job: "Developer", nickname: "二十七刻"}
嵌套对象的解构赋值
let staffs = {
group1:[ { id:"007", name:"April"}]
}
let {group1,group1:[{id,name}]} = staffs;
console.log(group1) // logs [{ id:"007", name:"April"}]
console.log(id) // logs "007"
console.log(name) // logs "April"
注意，代码中group1是模式，不是变量。如果想把group1也作为变量赋值，就要先进行定义再去赋值。
总结
数组和对象的解构赋值，本文就总结这么多。不足之处，万望指出。
