How to remove null values and empty objects from JavaScript objects

In JavaScript development, we often need to deal with object data, but sometimes these objects may contain some null values ​​or empty objects. When processing data, it is often necessary to remove these null values ​​or empty objects in order to get a cleaner and more compact data structure. This article will introduce several methods to teach you how to remove null values ​​​​and empty objects in JavaScript objects.

Method 1: Use loops and delete keywords

The first method is by looping through each property of the object and removing null values ​​or empty objects from the object using the delete keyword. This method is relatively straightforward and suitable for handling smaller objects.

function removeEmptyValues(obj) {
    
    
  for (const key in obj) {
    
    
    if (obj[key] === null || obj[key] === undefined) {
    
    
      delete obj[key];
    } else if (typeof obj[key] === 'object' && Object.keys(obj[key]).length === 0) {
    
    
      delete obj[key];
    }
  }
  return obj;
}

const myObject = {
    
    
  name: 'John',
  age: null,
  address: {
    
    
    city: 'New York',
    zipCode: undefined,
  },
  hobbies: [],
};

const result = removeEmptyValues(myObject);
console.log(result);
// Output: { name: 'John', address: { city: 'New York' } }

Method 2: The simplest, use JSON.stringify() and JSON.parse()

The second method is to convert the object to a JSON string and then convert the JSON string back to the object. In this process, JSON.stringify() the method will automatically remove null values, thereby achieving the effect of removing null values ​​and empty objects. 函数However, it should be noted that this method will convert the or properties in the object 非原始类型into string form, because JSON only supports primitive data types.

function removeEmptyValues(obj) {
    
    
  const jsonString = JSON.stringify(obj);
  const parsedObj = JSON.parse(jsonString);
  return parsedObj;
}

const myObject = {
    
    
  name: 'John',
  age: null,
  address: {
    
    
    city: 'New York',
    zipCode: undefined,
  },
  hobbies: [],
};

const result = removeEmptyValues(myObject);
console.log(result);
// Output: { name: 'John', address: { city: 'New York' } }

Method 3: Use Object.keys() and reduce()

The third method uses Object.keys()the method to get all the property keys of the object, and then uses reduce()the method to iterate through these properties and build a new object containing only properties with non-null values.

function removeEmptyValues(obj) {
    
    
  return Object.keys(obj).reduce((acc, key) => {
    
    
    if (obj[key] !== null && obj[key] !== undefined && !(typeof obj[key] === 'object' && Object.keys(obj[key]).length === 0)) {
    
    
      acc[key] = obj[key];
    }
    return acc;
  }, {
    
    });
}

const myObject = {
    
    
  name: 'John',
  age: null,
  address: {
    
    
    city: 'New York',
    zipCode: undefined,
  },
  hobbies: [],
};

const result = removeEmptyValues(myObject);
console.log(result);
// Output: { name: 'John', address: { city: 'New York' } }

Method 4: The most comprehensive, use the Lodash library

The fourth method uses the Lodash library omitBy()method, which can easily remove null values ​​​​and empty objects from objects. The omitBy() method accepts a function as a parameter to determine which attributes need to be excluded.

const _ = require('lodash');

const myObject = {
    
    
  name: 'John',
  age: null,
  address: {
    
    
    city: 'New York',
    zipCode: undefined,
  },
  hobbies: [],
};

const result = _.omitBy(myObject, (value) => value === null || value === undefined || (_.isObject(value) && _.isEmpty(value)));
console.log(result);
// Output: { name: 'John', address: { city: 'New York' } }

in conclusion

This article introduces four methods for removing null values ​​and empty objects from JavaScript objects. By using loops and delete keywords, JSON.stringify()and JSON.parse(), Object.keys()and reduce(), and Lodashthe library's omitBy()methods, you can choose the method that best suits your project needs. When dealing with large objects, it is recommended to use the Lodash library, which provides more functionality and flexibility. No matter which method you choose, removing null values ​​and empty objects will give you cleaner, more readable data, improving the quality and maintainability of your JavaScript code.