vue 判断对象不为空_js判断一个对象是否为空对象

最近遇到一个问题，用vue循环一个数组，展示一些海报图片。数组为空的话是不会遍历的，为了不让能够出现默认图片，这也就需要在数组中增加一个默认空对象arr[{}]。问题来了，提交的时候怎么判断这个对象是空的呢？

简单粗暴的判断

因为是展示海报图片，每个对象下都有url属性，所以最直接的判断当前object的url属性

if (arr[0].url) {

...

}

这个方法是无法判断arr为空的情况，如果arr[0]是个null，那么浏览器回抛出Cannot read property 'url' of undefined的错误

使用es5的getOwnPropertyNames属性

getOwnPropertyNames 方法可以获取所有的元素键。它的返回值是一个数组，当数组长度为零时，说明对象为空。

if (Object.getOwnPropertyNames(arr[0]))

这个方法和第一个方法相同，如果arr是个空数组，会抛出Cannot convert undefined or null to object

jQuery的实现方法

Js判断object/json 是否为空，可以使用jQuery的isEmptyObject()方法。

jquery的实现非常简单，就是for in循环对象，默认返回true，如果可以循环则return false

代码如下：

function isEmptyObject (obj){

for (let k in obj)

return false

return true

}

该方法可以兼容到所有异常情况，下面是例子：

console.log(isEmptyObject()); //true

console.log(isEmptyObject({})); //true

console.log(isEmptyObject(null)); //true

console.log(isEmptyObject(111)); //true

console.log(isEmptyObject({a: 1})); //false

过滤原型继承属性的方法

上面也是最简单的实现，其实我们实际生产中还面对很多问题，不如对象从别处继承的对象过滤。

代码如下：

function isOwnEmpty (obj){

for (let k in obj) {

if(obj.hasOwnProperty(key)) return false

}

return true

};