js中如何完美的解析数据

2024-12-03 21:36:15

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

由于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是若类型的语言,所以在使用数据的时候经常会出现这个几个错误 TypeError: Cannot read property 'xxx' of undefined TypeError: Cannot read property 'xxx' of null TypeError: xxx.map is not a function 而这些异常很难发
基于js中document.cookie全面解析

什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; document.cookie看上去就像一个属性,可以赋不同的值.但它和一般的属性不一样,改变它的赋值并不
浅析JS中什么是自定义react数据验证组件

我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');
Node.js 中如何收集和解析命令行参数

前言在开发 CLI(Command Line Interface)工具的业务场景下,离不开命令行参数的收集和解析. 接下来,本文介绍如何收集和解析命令行参数. 收集命令行参数在 Node.js 中,可以通过 process.argv 属性收集进程被启动时传入的命令行参数: // ./example/demo.js process.argv.slice(2); // 命令行执行如下命令 node ./example/demo.js --name=xiaoming --age=20 man //
使用node.JS中的url模块解析URL信息

在HTTP部分,详细介绍了URL的相关知识.而nodejs中的url模块提供了一些实用函数,用于URL处理与解析. 解析URL 解析 URL 对象有以下内容,依赖于他们是否在 URL 字符串里存在.任何不在 URL 字符串里的部分,都不会出现在解析对象里 'http://user:pass@host.com:8080/p/a/t/h?query=string#hash' ┌──────────────────────────────────────────────────────────────
js中作用域的实例解析

首先,要了解一下作用域的概念:作用--读.写,域--范围或空间.作用域:可用来进行读.写操作的范围或者空间. 其次,再来看看浏览器读取js文件(script标签内的内容)的步骤. 第一步:预解析-----根据var function 把可能用到的参数或函数找出来,放在内存里(这相当于放到仓库里面) 例1: <script> alert(a) var a=1 function fn1(){alert(2)} </script> 根据var和function可以找到:a fn1 预解
vue.js中引入vuex储存接口数据及调用的详细流程

前言前几天在慕课网上看到黄轶老师的高仿饿了么app视频教程,在做接口设计的时候,我在想,这个接口能不能储存下来全局调用呢?而不是走很多次接口,管理起来也麻烦. 万能的vue果然有这个功能,那就是vuex. Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 如果你不太理解 Vue.js 应用里的状态是什么意思的话,你可以想象一下你此前写的 Vue 组件里面的 data 字段.Vuex 把状态分
JS中showModalDialog 的使用解析

基本介绍: window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框.(就是打开后不能操作父窗口,只能等模式窗口关闭时才能操作) window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框.(就是打开后仍然可以进行其他的操作) 使用方法: vReturnValue = window.showModalDialog(sU
JS中的构造函数详细解析

在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,也包括用户自己定义的函数.一旦函数被作为构造函数执行,它内部的this属性将引用函数本身. 通常来说,构造函数没有返回值,它们只是初始化由this指针传递进来的对象,并且什么也不返回.如果一个函数有返回值,被返回的对象就成了new表达式的值.从形式上看,一个函数被作为构造函数还是普通函数执行的唯一区别,是否用new运算符. 上面的描述事实上有着更为精确的含义,这要把函数如果有返回值的情况分为函数的返回值是引用
Sql server中内部函数fn_PhysLocFormatter存在解析错误详解

前言有网友指出,SQL Server 2012中fn_PhysLocFormatter内部函数在解析数据行记录位置时存在错误,见:http://www.itpub.net/thread-1751655-1-1.html,实际测试后发现,一是2008R2中同样存在问题,二是不仅页号解析存在问题,槽号解析也存在同样问题. 下面先查看表NT_SiteInfo的数据行记录位置. select SiteID,%%physloc%%,sys.fn_PhysLocFormatter(%%physloc%%)

js中如何完美的解析数据

相关推荐

随机推荐