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 版
Mar 24 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
js实现表格筛选功能
Jan 18 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
vue设置默认首页的操作
Aug 12 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
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python递归实现打印多重列表代码
2020/02/27 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
晚会邀请函范文
2014/01/24 职场文书
暑期研修感言
2014/02/17 职场文书
家长会主持词
2014/03/26 职场文书
岗位工作说明书
2014/07/29 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
对讲机的最大通讯距离是多少
2022/02/18 无线电