ES6对象解构知多少-CFANZ编程社区

一、先来看看最基本的对象解构，在对象中提取某个字段：

const obj = {
    name: "Condor Hero",
    age : 18
};

let { name } = obj;
console.log(name);//Condor Hero

二、解构并使用别名

应用场景有两个：

一个是前端请求回来的接口定义的字段往往带有下划线，但我们的前端更便好于驼峰式命名，那么可以使用别名(rename)
结构的变量名和当前作用域的变量有冲突了。

const obj = {
    name: "Condor Hero",
    min_age : 18
};
const name = "你是大傻子";

let { name : userName,min_age: minAge} = obj;
console.log(name);//你是大傻子
console.log(userName);//Condor Hero
console.log(minAge);//18

需要注意的是：

let {name:userName} = {name:"Condor Hero"};

console.log(name)// name is not defined

只有 userName 被定义了。

三、解构嵌套对象

有时我们请求的接口嵌套对象会比较深，我们大概会这样解构：

const obj = {
    name: "Condor Hero",
    id  : 10,
    data: {
        result: "success"
    }
};

let { data } = obj;
let { result } = data;
console.log(result);//success

其实我们可以一步到位：

const obj = {
    name: "Condor Hero",
    id  : 10,
    data: {
        result: "success"
    }
};

let { data : { result }} = obj;
console.log(result);

如果在深一层：

const obj = {
    name: "Condor Hero",
    id  : 10,
    data: {
        result: {
            state : "success"
        }
    }
};

let { data : { result : {state} }} = obj;
console.log(state);

现在在深十层我估计你都知道怎么看了。这其实就是利用解构的别名，在进行解构。

这里我们需要在为了程序的鲁棒性要考虑第二次甚至是第三第四次解构的东西万一没有程序不就崩了，所以：一层解构不需要考虑，最少的大于等于两层嵌套

const obj = {
    name: "Condor Hero",
    id  : 10
};

let { data : { result } = {}} = obj;
console.log(result);//undefined

仔细看上面的代码，我们无论预期得到的代码层次结构多深，为了鲁棒性只需要赋值一次就够了。

完。2019年12月21日21:43:30