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实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
JS 基本概念详细介绍
Oct 16 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
Javascript 错误处理的几种方法
2009/06/13 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
围观tangram js库
2010/12/28 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
就业协议书的作用
2014/04/11 职场文书
入股协议书
2014/04/14 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
倡议书作文
2015/01/19 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
通讯稿范文
2015/07/22 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书