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

由于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]'))

// 

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue渲染时闪烁{{}}的问题及解决方法

jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法

JS中用EL表达式获取上下文参数值的方法