最近遇到一个问题，用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
};

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5571