一、对象如何解构赋值
- 对象的解构赋值与数组的解构赋值相似
- 等号左边都为对象解构
const {a,b}={a:1,b:2}
- 左边的{}中为需要赋值的变量
- 右边需要解构的对象
二、对象解构赋值的用法
const obj={
saber:'hhh',
archer:'adsf'
};
const {saber,archer}=obj
他是那key进行匹配的如果key不一样就匹配不到,但是数组是按照顺序进行解构
三、稍微复杂的解构条件
const player={
nickname:'感情戏',
master:'东海龙王',
skill:[{
skillName:'龙吟',
mp:'100',
time:6000
},{
skillName:'龙卷风',
mp:'400',
time:1000
},
{skillName:'聊天',
mp:'1001',
time:100}
]
};
const {nickname}=player;
console.log(nickname);//这里上面的{}里里面的是定义了与对象一样key的变量
const {master}=player;
const {skill}=player;
// const [skill1]=skill;
const {skill:[,,skill1]}=player;
console.log(skill1);
//2、
//
const {skill:[skill1,{skillName},{skillName:skiame}]}=player;
//这行有点难理解:记住对象必须对应才可以解构,但是数组不是他是按顺序进行解构,解构的左边类似定义的变量,只不过对象要求必须和左边的key一样才可以解构,但是数组就不是他是按顺序进行解构,
//但是定义不可以重复所以{skillName:skiame}是解要构第三个并且skillName给skiame
console.log(skill1+'='+skillName+'='+skiame);
{skillName: “聊天”, mp: “1001”, time: 100}
四、扩展运算符
const obj={
saber:'111',
ads:'12',
ew:'1'
};
const {saber,...oth}=saber
console.log(saber)
console.log(oth)//剩下的没匹配的给oth
4.1 扩展运算符合并对象
const obj1={
a:'1',
b:'2'
};
const obj={
c:'3',
...obj1
}
console.log(obj);// {c: "3", a: "1", b: "2"}
五、如何已经申明的变量进行对象的解构赋值
const obj={
name:'小米',
age:22
}
//把{age}为块级作用域
let {age}=obj;//({age})=obj当之前已经定义age
六、默认值:当没有匹配的时候给变量进行赋值
let girlf={
name:'小红',
age:undefined
}
let {name,age=24,hobby=['学习']}=girlf
七、对象的解构赋值的主要用途
- q:提取对象属性
const {name,hobby:[hobby1],hobby}={name:'小红',hobby:['学习']}
console.log(name)
- q:使用对象传入乱序的函数参数
function AJAX(option){
var type=option.type|| 'get';
console.log(type);
};
AJAX({
url:'/getinfo',
data:{
a:1
}
})
- 获取多个函数返回值
function getUserInfo(uid){
return {
status:true,
data:{
name:'小红'
},
msg:'请求成功'
};
};
const {status,data,msg:massage}=getUserInfo(123);