ES6第二天学习对象解构赋值

一、对象如何解构赋值

• 对象的解构赋值与数组的解构赋值相似
• 等号左边都为对象解构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)；