js中如何完美的解析数据


Posted in Javascript onMarch 18, 2018

自从有了前后端分离,一些后端小伙伴给出的数据结构也来越混乱了。以为分离减轻了他们的负担接口的质量会非常高但是人的惰性却体现的很“完美”。

由于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
[]

代码测试:https://jsbin.com/zoberem/edit?js,console

最后关于前端异常上报,这是一个很大的研究方向,市面上也有一些解决方案,但是真正推广的我目前没发现。

Javascript 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
解决使用vue.js路由后失效的问题
Mar 17 #Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 #Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 #Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 #Javascript
对vue里函数的调用顺序介绍
Mar 17 #Javascript
基于vue2.0动态组件及render详解
Mar 17 #Javascript
Vue实现动态创建和删除数据的方法
Mar 17 #Javascript
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php简单复制文件的方法
2016/05/09 PHP
Javascript Global对象
2009/08/13 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
html5使用canvas画一条线
2014/12/15 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
struct和class的区别
2015/11/20 面试题
毕业生求职的求职信
2013/12/05 职场文书
协议书范本
2014/04/23 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书