Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what is the method of checking whether an object is empty in native javascript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The following code snippet is used to check whether the object is empty. For newer browsers, you can use ES6's "Object.keys". For older browsers, you can install the Lodash library and use its "isEmpty" method.

Const empty = {} / *-newer browser-* / Object.keys (empty). Length = = 0 & & empty.constructor = Object// true / *-older version of the browser Browsers can use Lodash--*/_.isEmpty (empty) / / true what is native JavaScript

Native JavaScript refers to not using frameworks or libraries. It's just a regular normal JavaScript and doesn't use libraries like Lodash or jQuery.

a. Check for empty objects in newer browsers

We can check for empty objects using the built-in Object.keys method.

Const empty = {}; Object.keys (empty). Length = = 0 & & empty.constructor = object

Why do we need extra constructor checks?

You may be wondering why we need to check for constructor. It is designed to override the wrapper instance. In JavaScript, we have nine built-in constructors.

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

Here, we can use new Object () to create an empty object.

Const obj = new Object (); Object.keys (obj). Length = 0; / / true

Therefore, only use Object.keys, which does return true when the object is empty. But what happens when we create a new object instance using other constructors.

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 resolves false positives by checking constructor

Correct this error by adding a constructor check.

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 performs null check for other values

Then, let's test our methods on some values and see what we get.

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

It looks good so far, but it returns false for non-objects.

IsEmptyObject / / falseisEmptyObject (true) / / falseisEmptyObject ([]) / / false

But be careful! The following values raise an error.

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

Improved null check for null and undefined

If you don't want it to throw a TypeError, you can add an extra check

Function isEmptyObject (value) {return value & & Object.keys (value). Length = = 0 & & value.constructor = Object;} B. Empty object check in older browsers

What if you need to support older browsers? As we all know, when we talk about old browsers, we mean IE, and we have two options, using native or leveraging libraries.

Use JavaScript to check for empty objects

The native JS is not that concise, but it is okay to judge that it is used to empty an object.

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

For an object, it returns true.

IsObjectEmpty ({}); / true isObjectEmpty (new Object ()); / / true other types of constructors can also judge 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

Incoming null and undefined also do not report TypeError.

IsObjectEmpty (null); / / falseisObjectEmpty (undefined); / / false uses external libraries to check for empty objects

There are a large number of external libraries that can be used to check empty objects. And most of them have good support for old browsers.

Lodash _ .isEmpty ({}); / / trueUnderscore_.isEmpty ({}); / / truejQuery jQuery.isEmptyObject ({}); / / true native VS library

The answer depends on the situation! I really like to simplify the program as much as possible, because I don't like the overhead of external libraries. In addition, for smaller applications, I don't bother to set up external libraries.

But if your application already has an external library installed, continue to use it. You will know your application better than anyone else. So choose the method that best suits your situation.

That's all for the content of "what is the method to check whether an object is empty in native javascript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.