菜鸟也谈js（一）——ES6解构对象篇

前言

为什么我会在开篇谈这样一个low到爆的问题呢？这是因为一个伟大的错误，多么痛的领悟！从前，我深深的以为，后台是权威，后台的数据必须是对的。直到有一天测试给我反馈了一个bug，我的页面崩溃了.....怎么可能呢！！！作为一个21世纪三好青年写的页面怎么会崩溃？

前因后果——罪恶的代码

调用接口，接口正常情况下，应该返回如下数据

// 后台返回的数据
var userInfo = {
    name: 'Lily',
    age: '18',
    education: {
        degree: 'Masters',
        school: 'SYSU'
    }
};
复制代码

当年年轻的我，坚信我的代码是正确的，这不就是一个简单的对象吗，So easy!

var education = userInfo.education;
var degree = education.degree;
var school = education.school;
复制代码

我犯了所有年轻程序员都会犯的错误！/(ㄒoㄒ)/~~ 一天，后台接口返回userInfo为一个undefined，悲催的我，页面崩溃了.... 作为一个爱学习的良好青年，有了bug，当然第一时间debug（F12)了

最后发现这是后台返回数据的问题，但作为一个励志成为十佳前端的人，怎么能亲信后台呢？Too young too simple!

解决bug

我发现这个问题后，就对代码做了兼容，兼容措施如下：

var education = userInfo && userInfo.education;
var degree = education && education.degree;
var school = education && education.school;
复制代码

在发现ES6对象解构这个东东以前，我一直都是这么做的，代码也稳健的活了下来，直到有一天我发现了ES6，ES6成功的拯救了我。下面重点介绍ES6对象解构的知识。

ES6对象解构

最基本的解构

从一个简单的栗子开始！

// ES6年代我们都不怎么用var，用const就感觉很厉害的样子
const userInfo = {
    name: 'Lily',
    age: '18'
};
// 解构开始
const { name, age } = userInfo; // 此处有风险，最好改为 userInfo || {}
console.log(name); // Lily

复制代码

有木有觉得，在解构大对象时会很方便，我也是这么觉得的。下面看一个更给力的QAQ。

解构并使用别名

有时接口定义的字段往往不是我们想要的，甚至是和我们其他变量存在冲突，我们该怎么办呢？我也很无奈，叫后台改呗（你可能会被打死?）！其实我们在解构时也可以设置别名。

const userInfo = {
    name: 'Lily',
    age: '18'
};
// 解构开始
const { name: nickName } = userInfo;// 此处有风险，最好改为 userInfo || {}
console.log(nickName);
复制代码

解构嵌套对象

当我们遇到嵌套对象，该怎么办呢？对于一个菜鸟一般可以这样做：

// 后台返回的数据
var userInfo = {
    name: 'Lily',
    age: '18',
    education: {
        degree: 'Masters',
        school: 'SYSU'
    }
};
const { education } = userInfo; // 此处有风险，最好改为 userInfo || {}
const { degree } = education // 此处有风险，后面会说明
console.log(degree); // Masters
复制代码

上面我们写了两行，一层层剥开，明显繁琐，如果这个对象有三四层结构那简直无法入目。其实可以用解构一步到位的：

// 后台返回的数据
const userInfo = {
    name: 'Lily',
    age: '18',
    education: {
        degree: 'Masters',
        school: 'SYSU'
    }
};
const { education: { degree }} = userInfo;// 此处有风险，后面会说明
console.log(degree); // Masters
复制代码

没有外层怎么办

还是上面这个栗子，我们依然要解构出degree字段，加入可恶的后台某次返回的数据丢失了education字段

// 后台返回的数据
const userInfo = {
    name: 'Lily',
    age: '18'
};
const { education: { degree }} = userInfo;// TUncaught TypeError: Cannot destructure property `degree` of 'undefined' or 'null'.
复制代码

这是你是否会觉得还是我们原来的方法好，最起码不会出错

const userInfo = {
    name: 'Lily',
    age: '18'
};
const education = userInfo && userInfo.education;
const degree = education && education.degree;
const school = education && education.school;
复制代码

如果你是一个前端老鸟，一定知道其实我们的对象解构也是可以设置缺省值的。

// 后台返回的数据
const userInfo = {
    name: 'Lily',
    age: '18'
};
const { 
    education: { 
        degree 
    } = {}
} = userInfo || {};
console.log(degree); // undefined
复制代码

这样一来我们的解构就完美了，就算后台挂了，我们也依然坚挺，雄起！！！

更深层次的对象解构

后台正常返回数据

const userInfo = {
    name: 'Lily',
    age: 18,
    education: {
        school: {
            name: 'SYSU',
            rank: '9'
        }
    }
}
复制代码

加入我们要解构出name和rank字段，该怎么做呢？其实我们有两种方式

方式一分别给education和school设置缺省值为{}

// 后台实际返回数据
const userInfo = {
    name: 'Lily',
    age: 18
};
const {
    education: {
        school: {
            name,
            rank
        } = {}
    } = {}
} = userInfo || {};
console.log(name); // undefined
复制代码

方式二直接给education设置缺省值为{school: {}}。

// 后台实际返回数据
const userInfo = {
    name: 'Lily',
    age: 18
};
const {
    education: {
        school: {
            name,
            rank
        } 
    } = {
        school: {}
    }
} = userInfo || {};
console.log(name); // undefined
复制代码

结语

这里我们主要介绍了ES6解构对象的便利之处，麻麻再也不用担心我解构复杂对象了！测试也不会再给我报bug了。最后最重要的三点！

永远不要相信后台承诺返回的数据格式

@Author: Even