下面的代碼片段，用於檢查對象是否為空。對於較新的瀏覽器，你可以使用 ES6 的 「Object.keys」。對於較舊的瀏覽器，可以安裝Lodash庫並使用其「 isEmpty」方法。
const empty = {};
/* -------------------------
較新的瀏覽器
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true
/* -------------------------
老版本的瀏覽器可以使用 Lodash
----------------------------*/
_.isEmpty(empty)
// true
什麼是原生 JavaScript
原生 JavaScript 指的是不使用框架或庫。它只是常規的普通 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()創建一個空對象。
註：永遠不要使用構造函數創建對象。這被認為是不好的做法，請參閱 Airbnb Style Guide 和 ESLint。
const obj = new Object();
Object.keys(obj).length === 0; // true
因此，僅使用Object.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
通過檢查 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
但是要當心！下面這些值會引發錯誤。
// 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 庫
答案是看情況而定!我非常喜歡儘可能地簡化程序，因為我不喜歡外部庫的開銷。另外，對於較小的應用程序，我懶得設置外部庫。但如果你的應用程序已經安裝了一個外部庫，那麼就繼續使用它。你會比任何人都更了解你的應用程序。所以選擇最適合你情況的方法
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最後，謝謝大家的觀看。
下面的代碼片段，用於檢查對象是否為空。對於較新的瀏覽器，你可以使用 ES6 的 「Object.keys」。對於較舊的瀏覽器，可以安裝Lodash庫並使用其「 isEmpty」方法。
const empty = {};
/* -------------------------
較新的瀏覽器
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true
/* -------------------------
老版本的瀏覽器可以使用 Lodash
----------------------------*/
_.isEmpty(empty)
// true
什麼是原生 JavaScript
原生 JavaScript 指的是不使用框架或庫。它只是常規的普通 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()創建一個空對象。
註：永遠不要使用構造函數創建對象。這被認為是不好的做法，請參閱 Airbnb Style Guide 和 ESLint。
const obj = new Object();
Object.keys(obj).length === 0; // true
因此，僅使用Object.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
通過檢查 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
但是要當心！下面這些值會引發錯誤。
// 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 庫
答案是看情況而定!我非常喜歡儘可能地簡化程序，因為我不喜歡外部庫的開銷。另外，對於較小的應用程序，我懶得設置外部庫。但如果你的應用程序已經安裝了一個外部庫，那麼就繼續使用它。你會比任何人都更了解你的應用程序。所以選擇最適合你情況的方法
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最後，謝謝大家的觀看。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/275005.html
微信掃一掃 
支付寶掃一掃 
