建站
咨詢
售后
建站咨詢
新聞中心
下面的代碼片段，用于檢查對象是否為空。對于較新的瀏覽器，你可以使用 ES6 的 “Object.keys”。對于較舊的瀏覽器，可以安裝Lodash庫并使用其“ isEmpty”方法。
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：空間域名、網站空間、營銷軟件、網站建設、普寧網站維護、網站推廣。
- const empty = {};
- /* -------------------------
- 較新的瀏覽器
- ----------------------------*/
- Object.keys(empty).length === 0 && empty.constructor === Object
- // true
- /* -------------------------
- 老版本的瀏覽器可以使用 Lodash
- ----------------------------*/
- _.isEmpty(empty)
- // true
什么是原生 JavaScript
原生 JavaScript 指的是不使用框架或庫。它只是常規(guī)的普通 JavaScript，沒有使用Lodash或jQuery之類的庫。
A.在較新的瀏覽器中檢查空對象
我們可以使用內置的Object.keys方法檢查空對象。
- const empty = {};
- Object.keys(empty).length === 0 && empty.constructor === object;
為什么我們需要額外的constructor 檢查?
你可能想知道為什么我們需要對 constructor 進行檢查。它是為了覆蓋包裝器實例。在JavaScript中，我們有9個內置的構造函數。
- new Object();
- new String();
- new Number();
- new Boolean();
- new Array();
- new RegExp();
- new Function();
- new Date();
這里，我們可以使用new Object()創(chuàng)建一個空對象。
注：永遠不要使用構造函數創(chuàng)建對象。這被認為是不好的做法，請參閱 Airbnb Style Guide 和 ESLint。
- const obj = new Object();
- Object.keys(obj).length === 0; // true
因此，僅使用Object.keys，當對象為空時，它的確會返回true。但是，當我們使用其他構造函數創(chuàng)建新的對象實例時會發(fā)生什么。
- 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
通過檢查 constructor 解決誤報
通過添加構造函數檢查來糾正這個錯誤。
- 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
但是要當心!下面這些值會引發(fā)錯誤。
- // TypeError: Cannot covert undefined or null to object
- isEmptyObject(undefined);
- isEmptyObject(null);
改進對null和undefined的空檢查
如果不想讓它拋出TypeError，可以添加額外的檢查
- function isEmptyObject(value) {
- return value && Object.keys(value).length === 0 && value.constructor === Object;
- }
B.舊版本瀏覽器中的空對象檢查如果你需要支持較舊的瀏覽器怎么辦?大家都知道，當說舊的瀏覽器時，指的是 IE，我們有2個選擇，使用原生或利用庫。
使用 JavaScript 檢查空對象
原生的 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 和 undefined 也不會報 TypeError。
- isObjectEmpty(null); // false
- isObjectEmpty(undefined); // false
使用外部庫檢查空對象
有大量的外部庫可以用來檢查空對象。而且大多數都對舊瀏覽器有很好的支持
Lodash
- _.isEmpty({});
- // true
Underscore
- _.isEmpty({});
- // true
jQuery
- jQuery.isEmptyObject({});
- // true
原生 VS 庫答案是看情況而定!我非常喜歡盡可能地簡化程序，因為我不喜歡外部庫的開銷。另外，對于較小的應用程序，我懶得設置外部庫。但如果你的應用程序已經安裝了一個外部庫，那么就繼續(xù)使用它。你會比任何人都更了解你的應用程序。所以選擇最適合你情況的方法
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：Samantha Ming 譯者：前端小智 來源：medium
原文：https://www.samanthaming.com/tidbits/94-how-to-check-if-object-is-empty/#what-is-javascript
本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。
新聞標題：在JavaScript中如何檢查對象為空
文章鏈接：http://m.5511xx.com/article/coippii.html
