對象的解構賦值

對象的解構賦值中，與順序無關，需要注意的是，變量名與屬性名必須一致

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);