js中如何完美的解析数据
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章给大家分享了JS中完美解析数据的方法和技巧,对此有兴趣的朋友可以参考学习下。
自从有了前后端分离,一些后端小伙伴给出的数据结构也来越混乱了。以为分离减轻了他们的负担接口的质量会非常高但是人的惰性却体现的很“完美”。
由于js是若类型的语言,所以在使用数据的时候经常会出现这个几个错误
TypeError: Cannot read property 'xxx' of undefined TypeError: Cannot read property 'xxx' of null TypeError: xxx.map is not a function
而这些异常很难发现,及时发上线了都不一定能发现。因为这些问题都是由于数据异常导致的。如果优雅的解决或者说避免这些问题影响到用户体验呢?
// 第一种做法肯定是这样的 if(a){ return a.name || '你没名字' } // 这种做法处理简单的还能凑合用,但是如果你遇到这样的呢 user.country.area.city.name,难道要这样写 if(user && user.country && user.country.area && user.country.area.city){ return user.country.area.city.name || '你没名字' } // 这是多么痛苦的一件事情 @后端兄弟 // 第二种,感谢es6 let {country={area:{city:{name:'你没名字'}}}} = user; 这个感觉也不是很好的解决方案 // 第三种,利用reduce构建一个解析函数 function getValue(obj,key){ return key.split('.').reduce(function(o,k){ // o,当前对象 // key,数组下一个元素 if((typeof o === 'undefined' || o === null)){ return k.indexOf('[array]') !== -1?[]:o }else{ return k.indexOf('[array]') !== -1?(o[k.replace('[array]','')]||[]):o[k] } },obj) } let user1; let user2 = { } let user3 = { country:{ area:{ city:{ name:'12312' } } } } let user4 = { country:[ { city:{ name:'12312' } } ] } let user5 = { country:{ city:[1,2,3] } } console.log(getValue(user1,'country.area.city.name')) console.log(getValue(user2,'country.area.city.name')) console.log(getValue(user3,'country.area.city.name')) console.log(getValue(user5,'country.city[array]')) console.log(getValue(user5,'country.city[array].1')) console.log(getValue(user5,'country.city[array].10')) console.log(getValue(user5,'country.city[array].1.name')) console.log(getValue(user5,'country.city[array].persion[array]')) // 输出结果 undefined undefined "12312" [1, 2, 3] 2 undefined undefined []
代码测试:
最后关于前端异常上报,这是一个很大的研究方向,市面上也有一些解决方案,但是真正推广的我目前没发现。
上一篇:js中DOM事件绑定分析
下一篇:解决使用vue.js路由后失效的问题
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程