以下是检查对象是否为空的代码块。 对于较新的浏览器,您可以使用普通的JS并使用新的“Object.key”,但是对于较旧的浏览器支持,您可以安装Lodash库并使用它们的“isEmpty”方法
const empty = {};/* -------------------------
对于较新的游览器环境
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true/* -------------------------
针对旧游览器的Lodash库的isEmpty函数
----------------------------*/
_.isEmpty(empty)
// true
A. 在较新的浏览器中检查空对象
我们可以使用内置的“ Object.keys”方法来检查一个空对象
const empty = {};Object.keys(empty).length === 0 && empty.constructor === Object;
为什么我们需要额外的“构造函数”检查?
您可能想知道为什么我们需要“构造函数”检查。 在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,当Object为空时,它确实会返回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
对其他值进行空查测试
好的,让我们在一些值上测试我们的方法,看看会发生什么
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 ot object
goodEmptyCheck(undefined)
goodEmptyCheck(null)
改进对null和undefined的空检查
如果您不想抛出TypeError,可以添加额外的检查:
let value;
value && Object.keys(value).length === 0 && value.constructor === Object;
value = null; // null
value = undefined; // undefined
B. 旧浏览器中的空对象检查
如果您需要支持较旧的浏览器,该怎么办? 我们都知道,当说是老式浏览器时,指的是IE.
使用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”。 它将返回false而不抛出TypeError
isObjectEmpty(null); // false
isObjectEmpty(undefined); // false
使用外部库检查空对象
您可以使用大量的外部库来检查空对象。 而且它们中的大多数都对较旧的浏览器有很好的支持
Lodash
_.isEmpty({});
// true
Underscore
_.isEmpty({});
// true
jQuery
jQuery.isEmptyObject({});
// true
其他方法
for (var key in object) {
if (object.hasOwnProperty(key)) {
return false
}
}
return true
Object.prototype.toString.call(a) == "[object Object]" && JSON.stringify(a) == "{}"