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 相关文章推荐
javascript实现数独解法
Mar 14 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
js动态获取时间的方法分析
Aug 02 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
JS快速实现简单计算器
Apr 08 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
Javascript 中的 && 和 || 使用小结
2010/04/25 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python 字符串和整数的转换方法
2018/06/25 Python
Python os.access()用法实例
2019/02/18 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python Matplotlib模块的使用
2020/09/16 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
销售总监工作职责
2013/11/21 职场文书
汽车车尾标语大全
2015/08/11 职场文书
八年级数学教学反思
2016/02/17 职场文书
《海上日出》教学反思
2016/02/23 职场文书
会计专业自荐信范文
2019/05/22 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
Golang map映射的用法
2022/04/22 Golang
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python