解构赋值：解构赋值语法是一个JavaScript表达式，这使得可以将数组或属性从对象提取到不同的变量中。就是按照一定的规则，从数组或者对象中取值，然后赋值给变量。
数组的结构赋值
1.简单示例
const arr = [1, 2, 3, 4];
let [a, b, c, d] = arr;
image.png
说明：a,b,c,d分别取到了arr里的值。
2.更复杂的匹配规则
const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]];
const [ , b] = arr;
const [ , , g] = ['e', 'f', 'g']
const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']];
const [ , , [ , , [ , , g]]] = arr;
image.png
image.png
说明：','忽略当前的值，要取数组里的数组的值，要先匹配到这个数组，同样用','忽略不需要的值。
3.扩展运算符...
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b'];
const arr3 = ['zz', 1];
const arr4 = [...arr1, ...arr2, ...arr3];
const arr = [1, 2, 3, 4, 5, 6];
const [a, b, ...c] = arr;
image.png
说明：扩展运算符会从当前位置开始，往后匹配数组的所有值。
4.默认值
const arr = [1, null, undefined,undefined];
const [a, b = 2, c, d = 'aaa',e] = arr;
image.png
说明：当匹配的数组的值是未定义时，会取自己的默认值，当匹配的数组的值是null时，会取null。
5.应用场景：交换变量
let a = 20;
let b = 10;
// let temp;
// temp = a;
// a = b;
// b = temp;
[a, b] = [b, a];
image.png
说明：不需要中间变量，直接匹配数组。
6.应用场景：接收多个函数返回值
function getUserInfo(id) {
// .. ajax
return [
true,
{
name: '小明',
gender: '女',
id: id
},
'请求成功'
];
};
const [status, data, msg] = getUserInfo(123);
结果：[图片上传中...(image.png-370132-1563432630880-0)]
说明：和函数的返回值一一匹配。
对象的解构赋值
1.简单示例
const obj = {
saber: '阿尔托利亚',
archer: '卫宫'
};
const { saber, archer1 } = obj;
image.png
说明：对象中的属性是无序的，需要名字对应才能取出来。
2.稍微复杂的解构条件
const player = {
nickname: '感情的戏∫我没演技∆',
master: '东海龙王',
skill: [{
skillName: '龙吟',
mp: '100',
time: 6000
},{
skillName: '龙卷雨击',
mp: '400',
time: 3000
},{
skillName: '龙腾',
mp: '900',
time: 60000
}]
};
const { nickname } = player;
const { master } = player;
const { skill: [ skill1, { skillName }, { skillName: sklName } ] } = player;
image.png
说明：对象的解构赋值中，取某一属性的值只要名字相同即可，若要取得对象中的对象或者是数组里的属性值，需要相同的结构套下去最后根据数组或对象的解构赋值规则取值。如果有同名的属性，就在取值时起一个别名，实际上每个取出来的属性都有别名，只不过属性和别名相同省略了。
3.结合扩展运算符
const obj = {
saber: '阿尔托利亚',
archer: '卫宫',
lancer: '瑟坦达'
};
const { saber, ...oth } = obj;
const obj2 = {
archer: '卫宫',
lancer: '瑟坦达'
}
const obj1 = {
saber: '阿尔托利亚',
...obj2,
};
image.png
说明：通过扩展运算符可以取到后面的所有属性的值，也可以把对象连在一起。
4.对已经申明了的变量进行对象的解构赋值
let age;
const obj = {
name: '小明',
age: 22
};
({ age } = obj);
5.默认值
let girlfriend = {
name: '小红',
age: undefined,
};
let { name, age = 24, hobby = ['学习'] } = girlfriend;
image.png
说明：如果取得的值是undefind，会用自身的默认值。
6.应用场景：使用对象传入乱序的函数参数
function AJAX({
url,
data,
type = 'get'
}) {
// var type = option.type || 'get';
// console.log(option);
console.log(type);
};
AJAX({
data: {
a: 1
},
url: '/getinfo',
});
说明：传递的参数是对象，进行了解构赋值。
7.应用场景：获取多个函数返回值
function getUserInfo(uid) {
// ...ajax
return {
status: true,
data: {
name: '小红'
},
msg: '请求成功'
};
};
const { status, data, msg: message } = getUserInfo(123);
字符串的结构赋值
const str = 'I am the bone of my sword'; // 我是剑骨头
const [ a, b ,c, ...oth ] = str;
image.png
const [ ...spStr1 ] = str;
const spStr2 = str.split('');
const spStr3 = [ ...str ];
结果：
image.png
数值与布尔值的结构赋值
函数参数的结构赋值
function test ({
name,
age = 22,
hobby
}){
console.log(name,age,hobby);
}
test({name:'lafe',hobby:'做饭'});
