卡卡網(wǎng)

判斷對象是否為空，我們可以用JavaScript，也可用jQuery，有寫法較簡單的，也有寫法較復(fù)雜，有最原始的寫法，也有最先進(jìn)的寫法。今天，我將給大家介紹3種可行的方法，判斷對象是否為空，所有方法均經(jīng)過實(shí)例驗(yàn)證。

最原始的JS方法

說是最原始的JS方法，原因是它完全不用考慮瀏覽器的問題，它可以在任何瀏覽器里運(yùn)行正常，包括很老的IE8.0。

function isObjectEmpty(value) {
    return (
      Object.prototype.toString.call(value) === '[object Object]' &&
      JSON.stringify(value) === '{}'
    );
}
var obj = {};
document.write(isObjectEmpty(obj));

demodownload

執(zhí)行結(jié)果

true

如果你要考慮IE8用戶，又不想用JQuery，那么請用上面的JS方法。

JQuery方法

jQuery方法很簡單，你不需要再寫isObjectEmpty()這樣的判斷函數(shù)，你可以直接這樣：

var obj = {};
document.write(jQuery.isEmptyObject(obj));

demodownload

輸出

true

但是，對于IE8.0，只能引用較低版本的jQuery庫文件，比如若你引用的是jquery-3.2.1.min.js，那么在IE8瀏覽器會提示“jQuery未定義”“對象不支持此屬性或方法”的錯誤。

但在IE11，就不受jQuery庫文件版本的限制。

因此使用此方法時(shí)要注意這個(gè)問題。

使用Object.keys方法

較新瀏覽器中，可以使用內(nèi)置的Object.keys方法來檢查空對象。

function isEmptyObject(value) {
     return value && Object.keys(value).length === 0 && value.constructor === Object;
}

var obj = {};
document.write(isEmptyObject(obj));

demodownload

輸出

true

但是此方法當(dāng)對象是null或undefined時(shí)，返回的不是true或false，而是null或undefined：

function isEmptyObject(value) {
     return value && Object.keys(value).length === 0 && value.constructor === Object;
}

var obj = null;
document.write(isEmptyObject(obj)); //null

var obj = undefined;
document.write(isEmptyObject(obj)); //undefined

demodownload

但若用前面介紹的最原始的JS方法，判斷對象是null和undefined時(shí)，返回的是false。 

對內(nèi)置JS構(gòu)造函數(shù)的判斷

JavaScript 有9個(gè)內(nèi)置的原生對象構(gòu)造函數(shù)：

new Object()   // Object 對象


new String()    // String 對象
new Number()    // Number 對象
new Boolean()   // Boolean 對象
new Array()     // Array 對象
new RegExp()    // RegExp 對象
new Function()  // Function 對象
new Date()      // Date 對象

Math()對象不在列表中。Math是一個(gè)全局對象。new關(guān)鍵字不能用于Math。

不同判斷方法對這些對象構(gòu)造函數(shù)的判斷結(jié)果有所不同，使用最原始的JS判斷方法，結(jié)果如下：

function isObjectEmpty(value) {
    return (
      Object.prototype.toString.call(value) === '[object Object]' &&
      JSON.stringify(value) === '{}'
    );
}


isObjectEmpty({});           // true
isObjectEmpty(new Object()); // true


isObjectEmpty(new String());   // false
isObjectEmpty(new Number());   // false
isObjectEmpty(new Boolean());  // false
isObjectEmpty(new Array());    // false
isObjectEmpty(new RegExp());   // false
isObjectEmpty(new Function()); // false
isObjectEmpty(new Date());     // false

demodownload

使用Object.keys方法時(shí)，執(zhí)行結(jié)果這樣：

function isEmptyObject(value) {
     return value && Object.keys(value).length === 0 && value.constructor === Object;
  }
   
document.write(isEmptyObject({}));           // true
document.write(isEmptyObject(new Object())); // true

document.write(isEmptyObject(new String()));   // false
document.write(isEmptyObject(new Number()));   // false
document.write(isEmptyObject(new Boolean()));  // false
document.write(isEmptyObject(new Array()));    // false
document.write(isEmptyObject(new RegExp()));   // false
document.write(isEmptyObject(new Function())); // false
document.write(isEmptyObject(new Date()));     // false 

demodownload

使用jQuery方法時(shí)，執(zhí)行結(jié)果這樣：

document.write(jQuery.isEmptyObject(new Object())); // true

document.write(jQuery.isEmptyObject(new String())); // true
document.write(jQuery.isEmptyObject(new Number())); // true
document.write(jQuery.isEmptyObject(new Boolean())); // true
document.write(jQuery.isEmptyObject(new Array())); // true
document.write(jQuery.isEmptyObject(new RegExp())); // true
document.write(jQuery.isEmptyObject(new Function())); // true
document.write(jQuery.isEmptyObject(new Date())); // true

demodownload

總結(jié)-該用哪種方法？

上面介紹了判斷對象是否為空的幾種方法，那么我們該用哪種方法為好呢？

其實(shí)，如果從嚴(yán)密的角度來考慮，jQuery的判斷方法并不完美，它判斷內(nèi)置對象構(gòu)造函數(shù)是否為空屬于誤判了，比如new Date()對象，該對象并不是空，它本身是有值的。并且引用jQuery的庫文件若版本過高，老瀏覽器（IE8.0）不能支持。

原始JS方法，表現(xiàn)很完美，它可以不被構(gòu)造函數(shù)對象欺騙，并且它可以在老瀏覽器里使用。

新的Object.keys方法，在寫法上有了一定的提升，代碼較簡短，不過它只適用新瀏覽器，在老瀏覽器不被支持。

標(biāo)簽: 對象