场景

1. 当页面初始化时, 需要某个对象的属性对应的数据来渲染, 但是起始值或者后端返回的可能就是 null 或者{}

data(){
    return{a:{}
    }
},
cerated(){let res=null // or {}
    this.a=res
}

一旦对象层级超过三层就会报错. 提示找不到某个属性,js就会报错, 页面渲染也会被堵塞.

<div>{{a.b.c}}</div>

2. 当对象某个属性存在时, 才发起请求, 或者其他交互, 如检测商品 id, 账单amount, 用户openid 等

解决方式

要么初始化时就加上需要的属性, 要么就做非空判断.

初始值加上属性能够避免渲染阻断, 但是后端返回数据为 {} 后依然要做同样的处理, 不是很方便, 容易出错.

a={
    b:{c:""}    
}

推荐的方式是做非空判断和判断某个属性是否存在, 为 true 则取值, 为 false 则给默认值

判断对象

是否为空

(1) 使用JSON.stringify

把对象转为字符串，再判断字符串是否等于"{}"

const a={test:123}
JSON.stringify(a)==="{}" // false

(2) ES6新方法, 通过 Object.keys, Object.values, Object.entries 返回数组, 判断数组的长度是否大于 0 即可

const a={test:123}
console.log(Object.keys(a).length) // 1

是否有某个属性

(1) 通过上述的方法返回含有键值对的数组后, 判断数组中是否有某个对应的值, 使用 indexOf,-1 为不存在

const a={test:123}
Object.keys(a).indexOf("test") // 0
Object.keys(a).indexOf("show") // -1

(2) ES6 属性名 in 对象, 返回一个布尔值

const a={test:123}
"test" in a // true
"show" in a // false

(3) hasOwnProperty方法, 这个方法就是用来检测对象的某个属性是否存在

const a={test:123}
a.hasOwnProperty('test') // true
a.hasOwnProperty('show') // false