对象的解构赋值

对象的解构赋值中，与顺序无关，需要注意的是，变量名与属性名必须一致

const ｛name｝ = obj;这一步是数据解构赋值，相当于声明了保存在obj中的name属性值，意思是可以通过obj访问到name属性，因此还可以打印到name。

对象与数组不同，对象是无序的。所以它是通过属性名来标志的，不需要逗号分开:

用const进行对象的解构赋值时，遇到同名的键值对可以这样重新命名：
｛skillName:sklName｝，意思是取该对象的skillName的属性并赋值给sklName

 

 

1、对象的解构赋值

//对象的解构赋值
            const obj = {
                saber :'阿尔托利亚',
                archer:'卫宫'
            };
            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;
            
            const { skill } = player;//得到数组龙吟龙腾龙卷

const [ skill1 ] = skill;//得到数组第一项龙吟

 

 

3、结合扩展运算符，

通过扩展运算符“...”来获取obj中的属性和属性值是可以的：扩展运算符有一个作用就是取出参数对象中的所有可遍历属性，拷贝到当前对象之中，就是通过“...”可以拿到obj中的键值对拷贝到a上。

//结合扩展运算符
            const obj = {
                saber:'阿尔托利亚',
                archer:'卫宫',
                lancer:'瑟坦达'
            };
            const { saber, ...oth } = obj;
            
            对象的合并
            const obj1 = {
                archer:'卫宫',
                lancer:'瑟坦达'
            }
            const obj = {
                saber:'阿尔托利亚',
                ...obj1
            }

//oth得到后两项组合的一个对象（即剩下的所有没有匹配到的内容）

 

 

 

4、如何对已经申明的变量进行解构赋值（不建议这种写法）

//如何对已经申明来的变量进行解构赋值(不建议这种写法)
            let age;
            const obj = {
                name:'小明',
                age:22
            };
            ( { age } = obj );
            //

//得到age的值22

 

5、默认值（在对象传入乱序的排序参数时会经常使用）

            //默认值
            let girlfriend = {
                name:'小红',
                age:22,
            };
            let { name, age = 24, hobby = ['学习']} = girlfriend
            

 

6、提取对象属性

            //提取对象属性
            const { name, hobby: [ hobby1 ] , hobby } = {
                name: '小红',
                hobby: ['学习']
            };
            

 

6、使用对象传入乱序的函数参数

            //使用对象传入乱序的函数参数
            function AJAX({
                url,
                data,
                type = 'get'
            }){
                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);