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

所以在做判斷的時候，嚴謹點要用嚴格等於===。