js中如何完美的解析数据

 更新时间:2018年03月18日 07:51:00   投稿:laozhang  
这篇文章给大家分享了JS中完美解析数据的方法和技巧,对此有兴趣的朋友可以参考学习下。

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

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

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

相关文章

  • 原生js实现购物车

    原生js实现购物车

    这篇文章主要为大家详细介绍了原生js实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js 多种变量定义(对象直接量,数组直接量和函数直接量)

    js 多种变量定义(对象直接量,数组直接量和函数直接量)

    js 多种变量定义(对象直接量,数组直接量和函数直接量),大家可以参考下,对于以后学习js 面向对于与json操作会有帮助。
    2010-05-05
  • JavaScript实现自定义拖拽排序列表

    JavaScript实现自定义拖拽排序列表

    在Web开发中,拖拽排序是一个常见的需求,它允许用户通过拖拽的方式重新排列列表项的顺序,本文将介绍如何使用原生JavaScript实现这一功能,需要的可以了解下
    2024-01-01
  • 在iframe中使bootstrap的模态框在父页面弹出问题

    在iframe中使bootstrap的模态框在父页面弹出问题

    这篇文章主要介绍了在iframe中使bootstrap的模态框在父页面弹出问题,解决方法非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-08-08
  • JS实现5秒钟自动封锁div层的方法

    JS实现5秒钟自动封锁div层的方法

    这篇文章主要介绍了JS实现5秒钟自动封锁div层的方法,涉及javascript针对div层操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 在JavaScript中使用for循环的方法

    在JavaScript中使用for循环的方法

    这篇文章主要介绍了如何在JavaScript中使用for循环,通过使用JavaScript for...in循环,我们可以循环对象的键或属性,在迭代对象属性或进行调试时,它可能很有用,但在迭代数组或对对象进行修改时,应该避免使用for...in循环,需要的朋友可以参考下
    2022-11-11
  • JavaScrip实现一个有时间限制的缓存类的方式

    JavaScrip实现一个有时间限制的缓存类的方式

    本文将探索 JavaScript 中一种基于自动过期机制的时间限制缓存实现方式,提高数据缓存策略的灵活性和效率,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • 基于JS实现二维码名片生成的示例代码

    基于JS实现二维码名片生成的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现生成二维码名片的功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以动手尝试一下
    2022-06-06
  • JavaScript 动态加载脚本和样式的方法

    JavaScript 动态加载脚本和样式的方法

    这篇文章主要介绍了JavaScript 动态加载脚本和样式的方法,需要的朋友可以参考下
    2015-04-04
  • 微信小程序实现上传图片

    微信小程序实现上传图片

    这篇文章主要介绍了微信小程序实现上传图片,预览、删除、限制图片大小、张数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论