解构赋值语法是一个JavaSript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。
1.数组的解构赋值
数组的解构赋值
const arr = [1,2,3,4];
let [a,b,c,d] = arr; //此时a=1,b=2,c=3,d=4
更复杂的匹配规则
const arr = ['a','b',['c','d',['e','f','g']]];
const [,b] = arr; // 取b的值
const [,,g] = ['e','f','g']; //取g的值
const [,,[,,[,,g]]] = arr; //取g的值
扩展运算符
const arr1 = [1,2,3];
const arr2 = ['a','b'];
const arr3 = ['zz',1];
const arr4 = [...arr1,...arr2,...arr3]; //此时arr4 = [1,2,3,'a','b','zz',1]
const arr = [1,2,3,4,5];
const [a,b,...c] = arr; //a=1,b=2,c=[3,4,5]
默认值
const arr = [1,null,undefined,undefined];
const [a,b=2,c=2,d,e='aaa'] = arr; //此时a=1,b=null,c=2,d=undefined,e='aaa'
交换变量
let a = 1;
let b = 2;
[a,b] = [b,a]; //a=2,b=1
接受多个 函数返回值
function getUserInfo(){
return[
true,
{
name:'小明',
gender:'女',
id:id
},
'请求成功'
];
};
const [status,data,msg] = getUserInfo(123); //status=小明,data=女,msg=id
2.对象的解构赋值
对象的解构赋值
const obj = {
saber: '阿尔托利亚',
archer:'卫宫'
};
const {saber,archer1}=obj; //saber = 阿尔托利亚 ,archer1 = undefined
稍微复杂的解构赋值
const player = {
nickname: 'Lyn',
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:sName}]} = player; // skill没有值,skill1={skillName:'龙吟',mp: '100',time: 6000},skillName=龙卷雨击,sName=龙腾
结合扩展运算符
const obj = {
saber: '阿尔托利亚',
archer:'卫宫',
lancer:'瑟坦达'
};
const {saber, ...oth} = obj; // oth = {archer:'卫宫',lancer:'瑟坦达'}
如何对已经申明了的变量进行对象的解构赋值
let age;
const obj = {
name:'小明',
age: 22
};
({age} = obj); // age=22
const obj = {
name:'小明',
age: 22
};
let {age} = obj ; //age=22
默认值
let girlfriend = {
name: '小红',
age:22,
};
let {name,age=24,hobby=['学习']} = girlfriend; //name=小红,age=22,hobby=['学习']
提取对象属性
const {name,hobby:[hobby1]} = {
name: '小红',
hobby=['学习']
}; //name = 小红,hobby1 = 学习,hobby没有值
const {name,hobby:[hobby1],hobby} = {
name: '小红',
hobby=['学习']
}; //name = 小红,hobby1 = 学习,hobby=['学习']
使用对象传入乱序的函数参数
function AJAX(url,data,type='get'){
}; //url = '/getinfo',data={a:1},type='get'
AJAX({
url: '/getinfo',
data:{
a:1
},
});
获取多个 函数返回值
function getUserInfo(){
return{
stauts:true,
data:{
name:'小红'
},
msg: '请求成功'
};
};
const {status,data,msg} = getUserInfo(123) //status = true,data={name:'小红'},msg=请求成功
3.字符串的解构赋值
字符串的解构赋值
const str = 'I am abc';
const [a,b,c,...oth] = str; //a="I",b="",c="a",oth=["m","","a","b","c"]
提取属性
const str = 'I am abc';
const {length,split} = str; //length=8,split取用成功,但是无实际意义