解構賦值：解構賦值語法是一個JavaScript表達式，這使得可以將數(shù)組或屬性從對象提取到不同的變量中。就是按照一定的規(guī)則，從數(shù)組或者對象中取值，然后賦值給變量。
數(shù)組的結構賦值
1.簡單示例
const arr = [1, 2, 3, 4];
let [a, b, c, d] = arr;
說明：a,b,c,d分別取到了arr里的值。
2.更復雜的匹配規(guī)則
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;
說明：','忽略當前的值，要取數(shù)組里的數(shù)組的值，要先匹配到這個數(shù)組，同樣用','忽略不需要的值。
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;
說明：擴展運算符會從當前位置開始，往后匹配數(shù)組的所有值。
4.默認值
const arr = [1, null, undefined,undefined];
const [a, b = 2, c, d = 'aaa',e] = arr;
說明：當匹配的數(shù)組的值是未定義時，會取自己的默認值，當匹配的數(shù)組的值是null時，會取null。
5.應用場景：交換變量
let a = 20;
let b = 10;
// let temp;
// temp = a;
// a = b;
// b = temp;
[a, b] = [b, a];
說明：不需要中間變量，直接匹配數(shù)組。
6.應用場景：接收多個函數(shù)返回值
function getUserInfo(id) {
// .. ajax
return [
true,
{
name: '小明',
gender: '女',
id: id
},
'請求成功'
];
};
const [status, data, msg] = getUserInfo(123);
結果：[圖片上傳中...(image.png-370132-1563432630880-0)]
說明：和函數(shù)的返回值一一匹配。
對象的解構賦值
1.簡單示例
const obj = {
saber: '阿爾托利亞',
archer: '衛(wèi)宮'
};
const { saber, archer1 } = obj;
說明：對象中的屬性是無序的，需要名字對應才能取出來。
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;
說明：對象的解構賦值中，取某一屬性的值只要名字相同即可，若要取得對象中的對象或者是數(shù)組里的屬性值，需要相同的結構套下去最后根據(jù)數(shù)組或對象的解構賦值規(guī)則取值。如果有同名的屬性，就在取值時起一個別名，實際上每個取出來的屬性都有別名，只不過屬性和別名相同省略了。
3.結合擴展運算符
const obj = {
saber: '阿爾托利亞',
archer: '衛(wèi)宮',
lancer: '瑟坦達'
};
const { saber, ...oth } = obj;
const obj2 = {
archer: '衛(wèi)宮',
lancer: '瑟坦達'
}
const obj1 = {
saber: '阿爾托利亞',
...obj2,
};
說明：通過擴展運算符可以取到后面的所有屬性的值，也可以把對象連在一起。
4.對已經(jīng)申明了的變量進行對象的解構賦值
let age;
const obj = {
name: '小明',
age: 22
};
({ age } = obj);
5.默認值
let girlfriend = {
name: '小紅',
age: undefined,
};
let { name, age = 24, hobby = ['學習'] } = girlfriend;
說明：如果取得的值是undefind，會用自身的默認值。
6.應用場景：使用對象傳入亂序的函數(shù)參數(shù)
function AJAX({
url,
data,
type = 'get'
}) {
// var type = option.type || 'get';
// console.log(option);
console.log(type);
};
AJAX({
data: {
a: 1
},
url: '/getinfo',
});
說明：傳遞的參數(shù)是對象，進行了解構賦值。
7.應用場景：獲取多個函數(shù)返回值
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;
const [ ...spStr1 ] = str;
const spStr2 = str.split('');
const spStr3 = [ ...str ];
結果：
數(shù)值與布爾值的結構賦值
函數(shù)參數(shù)的結構賦值
function test ({
name,
age = 22,
hobby
}){
console.log(name,age,hobby);
}
test({name:'lafe',hobby:'做飯'});
