澳门在线看AV,国语自产免费精品视频一区二区,《血战松山》免费观看

欄目導航

新聞資訊

新聞資訊

js判斷數組為空和null（js數組過濾方法）

下面的代碼片段，用于檢查對象是否為空。對于較新的瀏覽器，你可以使用 ES6 的 “.keys”。對于較舊的瀏覽器，可以安裝庫并使用其“ ”方法。

const?empty?=?{};
/*?-------------------------
??較新的瀏覽器
----------------------------*/
Object.keys(empty).length?===?0?&&?empty.constructor?===?Object
//?true
/*?-------------------------
??老版本的瀏覽器可以使用?Lodash
----------------------------*/
_.isEmpty(empty)
//?true

什么是原生

原生指的是不使用框架或庫。它只是常規的普通，沒有使用或之類的庫。

A.在較新的瀏覽器中檢查空對象

我們可以使用內置的.keys方法檢查空對象。

const?empty?=?{};
Object.keys(empty).length?===?0?&&?empty.constructor?===?object;

為什么我們需要額外的檢查？

你可能想知道為什么我們需要對進行檢查。它是為了覆蓋包裝器實例。在中，我們有9個內置的構造函數。

new?Object();
new?String();
new?Number();
new?Boolean();
new?Array();
new?RegExp();
new?Function();
new?Date();

這里，我們可以使用new ()創建一個空對象。

注：永遠不要使用構造函數創建對象。這被認為是不好的做法，請參閱 Style Guide 和。

const?obj?=?new?Object();
Object.keys(obj).length?===?0;?//?true

因此，僅使用.keys，當對象為空時，它的確會返回true。但是，當我們使用其他構造函數創建新的對象實例時會發生什么。

function?badEmptyCheck(value)?{
??return?Object.keys(value).length?===?0;
}
badEmptyCheck(new?String());????//?true?
badEmptyCheck(new?Number());????//?true?
badEmptyCheck(new?Boolean());???//?true?
badEmptyCheck(new?Array());?????//?true?
badEmptyCheck(new?RegExp());????//?true?
badEmptyCheck(new?Function());??//?true?
badEmptyCheck(new?Date());??????//?true?

通過檢查解決誤報

通過添加構造函數檢查來糾正這個錯誤。

function?goodEmptyCheck(value)?{
??Object.keys(value).length?===?0
????&&?value.constructor?===?Object;?//??constructor?check
}
goodEmptyCheck(new?String());???//?false?
goodEmptyCheck(new?Number());???//?false?
goodEmptyCheck(new?Boolean());??//?false?
goodEmptyCheck(new?Array());????//?false?
goodEmptyCheck(new?RegExp());???//?false?
goodEmptyCheck(new?Function());?//?false?
goodEmptyCheck(new?Date());?????//?false?

Nice，干的漂亮

對其他值進行空檢查

接著，我們用一些值上測試我們的方法，看看我們會得到了什么

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

到目前為止看起來不錯，對于非對象它返回 false。

isEmptyObject(100)??//?false
isEmptyObject(true)?//?false
isEmptyObject([])???//?false

但是要當心！下面這些值會引發錯誤。

//?TypeError:?Cannot?covert?undefined?or?null?to?object
isEmptyObject(undefined);
isEmptyObject(null);

改進對null和的空檢查

如果不想讓它拋出，可以添加額外的檢查

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

B.舊版本瀏覽器中的空對象檢查

如果你需要支持較舊的瀏覽器怎么辦？大家都知道，當說舊的瀏覽器時，指的是 IE，我們有2個選擇js判斷對象值是否為空，使用原生或利用庫。

使用檢查空對象

原生的 JS 并不那么簡潔，但判斷用來空對象是沒問題的。


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

對于對象，它返回true。

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?

傳入 null 和也不會報。

isObjectEmpty(null);??????//?false
isObjectEmpty(undefined);?//?false

使用外部庫檢查空對象

有大量的外部庫可以用來檢查空對象。而且大多數都對舊瀏覽器有很好的支持

_.isEmpty({});
//?true

_.isEmpty({});
//?true

jQuery.isEmptyObject({});
//?true

原生 VS 庫

答案是看情況而定!我非常喜歡盡可能地簡化程序，因為我不喜歡外部庫的開銷。另外，對于較小的應用程序，我懶得設置外部庫。但如果你的應用程序已經安裝了一個外部庫，那么就繼續使用它。你會比任何人都更了解你的應用程序。所以選擇最適合你情況的方法

人才們的【三連】就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。