ES6 物件的解構賦值-有解無憂

物件是無序的，必須使用屬性名去匹配

因此解構賦值時變數名必須與物件的屬性名保持一致

const obj={
    a:1,
    b:2
};
let {a,b}=obj;

比較復雜的結構條件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<script>

const person={
    name:"cyy",
    age:10,
    friends:[{
        name:"cyy2",
        age:20
    },{
        name:"cyy3",
        age:30
    },{
        name:"cyy4",
        age:40
    }]
};

const {name}=person;//name   "cyy"
const {age}=person;//age   10

//只能取到friend1，不能取到friends
const {friends:[friend1]}=person;//friend1   {name: "cyy2", age: 20}
const {friends:[,friend2]}=person;//friend2   {name: "cyy3", age: 30}
const {friends:[,,friend3]}=person;//friend3   {name: "cyy4", age: 40}

const {friends:[{name}]}=person;//name   "cyy2"
const {friends:[,{age}]}=person;//age   30
const {friends:[{name},{name},{name}]}=person;
</script>
</body>
</html>

如果出現物件屬性名重復的情況，會報錯

解決方法是使用: 來定義別名

const {friends:[{name:fname1},{name:fname2},{name:fname3}]}=person;// "cyy2"

物件的解構賦值結合擴展運算子：

const obj={
    name:"cyy",
    age:18,
    id:1
}

const {name,...oth}=obj;

使用擴展運算子合并物件：

const obj1={
    name1:"cyy1",
    age1:18
}
const obj2={
    name2:"cyy2",
    age2:28
}
const obj3={
    name3:"cyy3",
    age3:38
}
const obj={
    name:"cyy",
    ...obj1,
    ...obj2,
    ...obj3
}

如何對已經宣告的變數進行物件的解構賦值：

let age;//宣告變數
const obj={
    name:"cyy",
    age:18
};
{ age }=obj;

這種情況下會報錯，因為把{age}看成了一個塊級作用域

解決方法是外面用圓括號包裹

let age;//宣告變數
const obj={
    name:"cyy",
    age:18
};
//{ age }=obj;
({ age }=obj);

總而言之不建議先宣告再結構賦值哈，最好是宣告的同時進行解構賦值

默認值：

當屬性值不存在或者為undefined時，會使用默認值

const person={
    name:"cyy",
    age:18
};

let {name,age=20,hobby=["html","css"]}=person;

物件的解構賦值常用場景：

提取物件屬性

const {name,hobby:[hobby1]}={
    name:"cyy",
    age:18,
    hobby:[
        "html",
        "css"
    ]
}

需要注意的是，這樣是拿不到hobby的值，如果需要獲取hobby，則需要單獨再加

const {name,hobby:[hobby1],hobby}={
    name:"cyy",
    age:18,
    hobby:[
        "html",
        "css"
    ]
}

使用物件傳入亂序的函式引數：

function Ajax({
    url,
    data,
    type="get"
}){
    console.log(type);
}

Ajax({
    //可以亂序
    url:"getxxx",
    data:{
        a:1
    }
})

獲取多個函式回傳值

function getInfo(uid){
    //...
    
    return {
        status:"success",
        data:{
            a:1
        },
        info:"hello"
    }
}

const {status,data,info}=getInfo(333);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140005.html

標籤：JavaScript

上一篇：ES6 陣列的解構賦值

下一篇：ES6 字串、數值與布林值、函式引數的解構賦值