未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

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


菜鸟也谈js(一)――ES6解构对象篇
前应后果――罪恶的代码

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

// 后台返回的数据 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)了


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

最后发现这是后台返回数据的问题,但作为一个励志成为十佳前端的人,怎么能亲信后台呢?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。

解构并使用别名

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

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'. 复制代码
菜鸟也谈js(一)――ES6解构对象篇

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

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 复制代码

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:菜鸟也谈js(一)――ES6解构对象篇
本站链接:https://www.codesec.net/view/620865.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(12)