JavaScript 判断空对象、空数组的方法

原文作者：celineWong7
转载至链接：https://www.jianshu.com/p/cadcbab793d7

我们在判断参数是否为空时，希望把`null`, `undefined`, `{}`, `[]`,`""` 这五类都判定为空。

一、为什么判定空对象、空数据有点“难”？

首先，我们先看下下面的表格：

变量a	取非 !a	自身全等比较	描述	数据类型
null	true	true	空对象	Null
undefined	true	true	未定义对象	Undefined
0	true	true	数值0	Number
""	true	true	空字符串	String
[]	false	false	空数组	Array
{}	false	false	空对象	Object

从表格中，我们可以看出想要判断是不是null, undefined , "", 0，都比较容易， 非操作 和 比较操作 都能实现。就是{}, []比较顽固，两种方法都无效。

二、判定空数组的方法

分析：所谓空数组，就是数组的长度等于0。所以我们的难点就落在了怎么判断一个参数的数据类型是数组了。
我们可以通过isPrototypeOf()方法实现。

var obj = [];
Array.prototype.isPrototypeOf(obj); // => true

isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。即判断 Array 是否存在于 obj 的原型链上。该方法属于 ES3 标准，现代浏览器均支持，包括 IE。

所以，完整的检验空数组的表达式如下：

/* 满足以下判断表达式的都是 空数组 [] */ 
Array.prototype.isPrototypeOf(obj) && obj.length === 0

三、判定空对象的方法

分析：和判断空对象类似的，我们只要能验证这个对象的keys长度是0，那就是个空对象了。我们依旧可以通过isPrototypeOf()方法实现判断一个数据是不是对象。

var obj = {};
Object.prototype.isPrototypeOf(obj); // => true

完整的检验空对象的表达式如下：

/*	满足以下判断表达式的都是 空对象  */ 
Object.prototype.isPrototypeOf(obj) && Object.keys(obj).length === 0

其中，Object.keys()方法会返回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致（该方法属于 ES5 标准，IE9 以上和其它现代浏览器均支持）。
若要兼容IE9以下，可以用 [for...in]替代，但要注意for...in 会将对象原型链上的属性也枚举出来，所以要借hasOwnProperty()方法来判断是不是对象本身的属性。

function hasKeys(obj){
    for(var key in obj) {
        if(obj.hasOwnProperty(key)) {
            return true;
        }
    }
}
var obj1 = {a:'aa',b:'bb'};
var obj2 = {};
console.log(hasKeys(obj1)); 	// => true
console.log(hasKeys(obj2)); 	// => undefined

但要注意：在JavaScript 中一切皆是对象，也就是说，Object 也存在于数组的原型链上，因此在封装校验方法时，数组需要先于对象检验。

Array.prototype.isPrototypeOf([]); 		// => true
Array.prototype.isPrototypeOf({}); 		// => false

Object.prototype.isPrototypeOf([]); 	// => true
Object.prototype.isPrototypeOf({}); 	// => true

注意：isPrototypeOf 和 instanceof operator 是不一样的。在表达式 obj instanceof AFunction 中，检测的是 AFunction.prototype 是否在obj 的原型链中，而不是检测 AFunction 自身。

四、一个判断参数为空的函数封装

结合上面的空对象、空数组检测方法，我们可以封装一个判断参数为空的函数。

function isEmpty(a){
  /* 检验空字符串 */  
  if (a === "") return true; 
  /* 检验字符串类型的null */  
  if (a === "null") return true; 
  /* 检验字符串类型的 undefined	*/  
  if (a === "undefined") return true; 
  /* 检验 undefined 和 null */  
  if (!a && a !== 0 && a !=="") return true;
  /* 检验空数组	*/  
  if (Array.prototype.isPrototypeOf(a) && a.length === 0 ) return true;
  /* 检验空对象  */  
  if (Object.prototype.isPrototypeOf(a) && Object.keys(a).length === 0 ) return true;  
  return false;
}

小小Tips：

1. 一个讨巧判断空数组、空对象的方法：

var item = [];
console.log(JSON.stringify(item) === '[]');  // => true

var item = {};
console.log(JSON.stringify(item) === '{}'); // => true

2. null, undefined, {}, [],"" , 0在非严格等于（即两个等号时==）情况下，他们互有“帮派”。

• null, undefined为一组。

null == undefined  // =>  true

• [], "" , 0为一组。

console.log("" == 0);  	// => true
console.log("" == []);  // => true
console.log(0  == []);  // => true

/*但不要混淆，空数组不等于空数组但不要混淆，空数组不等于空数组 */ 
[] == [] 	// => false
{} == {}	// => false

所以在做判断的时候，严谨点要用严格等于===。