js中如何优雅的解析数据

legendaryedu 发布于2019-08-26 11:50 / 1188人阅读

摘要：自从有了前后端分离，一些后端小伙伴给出的数据结构也来越混乱了。由于是若类型的语言，所以在使用数据的时候经常会出现这个几个错误而这些异常很难发现，及时发上线了都不一定能发现。因为这些问题都是由于数据异常导致的。

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

测试代码

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

私有云专线服务 js中如何获得后台的数据 js中怎么解析json数据 js中解析json数据类型 js如何解析json数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107655.html

【JS实用技巧】优化动态创建元素的方式，让代码更加优雅且利于维护

摘要：更好的方案模板分离原则模板分离原则将定义模板的那一部分，与的代码逻辑分离开来，让代码更加优雅且利于维护。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言在前端开发中，经常需要动态添加一些元素到页面上。那么如何通过一些技巧，优化动态创建页面元素的方式，使得代码更加优雅，并且更易于维护呢？接下来我们通过研究一些实例...

JeOam 2019-08-20 14:46 评论0 收藏0
【JS实用技巧】优化动态创建元素的方式，让代码更加优雅且利于维护

摘要：更好的方案模板分离原则模板分离原则将定义模板的那一部分，与的代码逻辑分离开来，让代码更加优雅且利于维护。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言在前端开发中，经常需要动态添加一些元素到页面上。那么如何通过一些技巧，优化动态创建页面元素的方式，使得代码更加优雅，并且更易于维护呢？接下来我们通过研究一些实例...

hqman 2019-08-01 16:26 评论0 收藏0
如何优雅地查看 JS 错误堆栈？

摘要：摘要堆栈是的关键。假设捕获了一个异常，上报的堆栈是这个这个堆栈，你看得出问题来吗我们发布到的脚本文件，普遍是经过压缩的，所以堆栈可读性相当的差。假如有下面的一个堆栈查看工具，又如何眼尖的同学，一眼就能找到问题。摘要：堆栈是Debug的关键。原文：如何优雅地查看 JS 错误堆栈？作者：小芭乐 Fundebug经授权转载，版权归原作者所有。在前端，我们经常会通过 wind...

megatron 2019-08-26 13:32 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

chemzqm 2019-08-02 15:27 评论0 收藏0
在Typescript项目中，如何优雅的使用ESLint和Prettier

摘要：对于项目的编码规范而言，主要有两种选择和。此外由于性能问题，官方决定全面采用，甚至把仓库作为测试平台，而的解析器也成为独立项目，专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。对于Typescript项目的编码规范而言，主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由...

WilsonLiu95 2019-08-23 18:29 评论0 收藏0