Example implementation in native javascript check whether the object is empty

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

const empty = {}; 
/* ------------------------------------------------------------------------------------------------------------------------------
   Newer browsers
 ------------------------*/
(empty).length === 0 &&  === Object
// true 
/* ------------------------------------------------------------------------------------------------------------------------------
   Older browsers can use Lodash
 ------------------------*/
_.isEmpty(empty)
// true

What is native JavaScript

Native JavaScript refers to not using frameworks or libraries. It's just regular regular JavaScript, not usedLodashorjQuerylibrary like that.

A. Check for empty objects in newer browsers

We can use the built-inMethod checks for empty objects.

const empty = {}; 
(empty).length === 0 &&  === object;

Why we need extraconstructorexamine?

You may be wondering why we need to be rightconstructorConduct inspection. It is to overwrite the wrapper instance. In JavaScript, we have 9 built-in constructors.

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

Here we can usenew Object()Create an empty object.

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

Therefore, only, when the object is empty, it does returntrue. But what happens when we create new object instances using other constructors.

function badEmptyCheck(value) {
  return (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 

Resolve false positives by checking constructor

Correct this error by adding a constructor check.

function goodEmptyCheck(value) {
  (value).length === 0
    &&  === 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 

Perform empty checks on other values

Next, we test our method with some values ​​to see what we get

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

So far it looks good, for non-object it returnsfalse。

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

But be careful! The following values ​​will throw an error.

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

ImprovednullandundefinedA blank check

If you don't want it to throwTypeError, additional checks can be added

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

B. Check empty object in old browsers

What if you need to support older browsers? As we all know, when talking about old browsers, we refer to IE, we have 2 options, using native or utilitarian libraries.

Check empty objects with JavaScript

Native JS is not that concise, but it is OK to judge that it is used to empty objects.

function isObjectEmpty(value) {
  return (
    (value) === '[object Object]' && (value) === '{}'
  );
}

For the object, it returnstrue。

isObjectEmpty({});           // true 
isObjectEmpty(new Object()); // true 

Other types of constructors can also be judged normally

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 

IncomingnullandundefinedWill not reportTypeError。

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

Check for empty objects using external library

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

Lodash 
_.isEmpty({});
// true
Underscore
_.isEmpty({});
// true
jQuery 
({});
// true

Native VS library

The answer is that it 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. Also, for smaller applications, I'm too lazy to set up external libraries.

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

The above is the detailed content of the example implementation of checking whether the object is empty in native JavaScript. For more information on checking whether the object is empty in JavaScript, please pay attention to my other related articles!