How to Remove Null and Undefined Attributes from a JavaScript Object?

Remove Blank Attributes from an Object in Javascript

When working with JavaScript objects, it may be necessary to remove attributes that are undefined or null. This can help to clean up data, remove unnecessary fields, or prepare objects for storage. There are several ways to accomplish this task depending on the version of JavaScript being used.

ES10/ES2019

In ES10/ES2019, the most straightforward approach is to use the Object.fromEntries() method to create a new object containing only the non-blank attributes:

let o = Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));

This can also be written as a function:

function removeEmpty(obj) {
  return Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));
}

For nested objects, a recursive function can be used:

function removeEmpty(obj) {
  return Object.fromEntries(
    Object.entries(obj)
      .filter(([_, v]) => v != null)
      .map(([k, v]) => [k, v === Object(v) ? removeEmpty(v) : v])
  );
}

ES6/ES2015

In ES6/ES2015, the following one-liner can be used, but note that it mutates the original object rather than creating a new one:

Object.keys(obj).forEach((k) => obj[k] == null && delete obj[k]);

Alternatively, the following single declaration will create a new object without mutating the original:

let o = Object.keys(obj)
  .filter((k) => obj[k] != null)
  .reduce((a, k) => ({ ...a, [k]: obj[k] }), {});

This can be written as a function as well:

function removeEmpty(obj) {
  return Object.entries(obj)
    .filter(([_, v]) => v != null)
    .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
}

For nested objects, the following recursive function can be used:

function removeEmpty(obj) {
  return Object.entries(obj)
    .filter(([_, v]) => v != null)
    .reduce(
      (acc, [k, v]) => ({ ...acc, [k]: v === Object(v) ? removeEmpty(v) : v }),
      {}
    );
}

ES5/ES2009

In ES5/ES2009, the code is more verbose:

function removeEmpty(obj) {
  return Object.keys(obj)
    .filter(function (k) {
      return obj[k] != null;
    })
    .reduce(function (acc, k) {
      acc[k] = obj[k];
      return acc;
    }, {});
}

This can be written in an imperative style as well:

function removeEmpty(obj) {
  const newObj = {};
  Object.keys(obj).forEach(function (k) {
    if (obj[k] && typeof obj[k] === "object") {
      newObj[k] = removeEmpty(obj[k]);
    } else if (obj[k] != null) {
      newObj[k] = obj[k];
    }
  });
  return newObj;
}

Finally, a recursive version written in a functional style:

function removeEmpty(obj) {
  return Object.keys(obj)
    .filter(function (k) {
      return obj[k] != null;
    })
    .reduce(function (acc, k) {
      acc[k] = typeof obj[k] === "object" ? removeEmpty(obj[k]) : obj[k];
      return acc;
    }, {});
}

By applying these techniques, you can effectively remove blank attributes from an object in different versions of JavaScript, ensuring that your data is clean and ready for further processing or storage.

The above is the detailed content of How to Remove Null and Undefined Attributes from a JavaScript Object?. For more information, please follow other related articles on the PHP Chinese website!