场景

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