如何去除 JavaScript 对象中的空值和空对象

在 JavaScript 开发中，我们经常需要处理对象数据，但有时这些对象可能包含一些空值或空对象。在处理数据时，通常需要将这些空值或空对象去除，以便得到更干净、更紧凑的数据结构。本文将介绍几种方法，教你如何去除 JavaScript 对象中的空值和空对象。

方法一：使用循环和 delete 关键字

第一种方法是通过循环遍历对象的每个属性，并使用 delete 关键字从对象中删除空值或空对象。这个方法比较直接，适用于处理较小的对象。

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' } }

方法二：最简洁的，使用 JSON.stringify() 和 JSON.parse()

第二种方法是先将对象转换为 JSON 字符串，再将 JSON 字符串转换回对象。在这个过程中，JSON.stringify() 方法会自动去除 null 值，从而达到去除空值和空对象的效果。不过需要注意的是，这个方法会将对象中的函数或非原始类型的属性转换为字符串形式，因为 JSON 只支持原始数据类型。

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' } }

方法三：使用 Object.keys() 和 reduce()

第三种方法使用 Object.keys() 方法获取对象的所有属性键，然后使用 reduce() 方法遍历这些属性，并构建新的对象，只包含非空值的属性。

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' } }

方法四：最全面的，使用 Lodash 库

第四种方法使用 Lodash 库的omitBy()方法，它可以很方便地去除对象中的空值和空对象。omitBy() 方法接受一个函数作为参数，用于判断哪些属性需要被排除。

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' } }

结论

本文介绍了四种方法用于去除 JavaScript 对象中的空值和空对象。通过使用循环和 delete 关键字、JSON.stringify() 和 JSON.parse()、Object.keys() 和 reduce()，以及 Lodash 库的 omitBy() 方法，你可以根据项目需求选择最适合的方法。在处理大型对象时，建议使用 Lodash 库，它提供了更多的功能和灵活性。不论你选择哪种方法，去除空值和空对象能让你得到更整洁、更易读的数据，提高 JavaScript 代码的质量和可维护性。