菜鸟也谈js(一)——ES6解构对象篇

3,696 阅读4分钟

前言

为什么我会在开篇谈这样一个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