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[js]获取url参数的代码
Oct 17 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
微信JSSDK上传图片
Aug 23 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
手机端转换rem适应
Apr 01 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
关于Js中new操作符的作用详解
Feb 21 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制作静态网站的模板框架(四)
2006/10/09 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
python实现求特征选择的信息增益
2018/12/18 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
python爬虫请求头设置代码
2020/07/28 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
python 将Excel转Word的示例
2021/03/02 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
红领巾心向党广播稿
2014/01/19 职场文书
2014和解协议书范文
2014/09/15 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
经济纠纷起诉状
2015/05/20 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
环境卫生标语
2015/08/03 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
《小小的船》教学反思
2016/02/18 职场文书