快捷導(dǎo)航

去除JavaScript對象中空值和空對象的四種方式

更新時間：2023年09月18日 10:17:12 作者：MoYoon

開發(fā)時遇到一個問題,需要將對象中的空值和空對象去除,所以這篇文章主要給大家介紹了關(guān)于去除JavaScript對象中空值和空對象的四種方式,需要的朋友可以參考下

前言

在 JavaScript 開發(fā)中，我們經(jīng)常需要處理對象數(shù)據(jù)，但有時這些對象可能包含一些空值或空對象。在處理數(shù)據(jù)時，通常需要將這些空值或空對象去除，以便得到更干凈、更緊湊的數(shù)據(jù)結(jié)構(gòu)。本文將介紹幾種方法，教你如何去除 JavaScript 對象中的空值和空對象。

方法一：使用循環(huán)和 delete 關(guān)鍵字

第一種方法是通過循環(huán)遍歷對象的每個屬性，并使用 delete 關(guān)鍵字從對象中刪除空值或空對象。這個方法比較直接，適用于處理較小的對象。

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()

第二種方法是先將對象轉(zhuǎn)換為 JSON 字符串，再將 JSON 字符串轉(zhuǎn)換回對象。在這個過程中，JSON.stringify() 方法會自動去除 null 值，從而達(dá)到去除空值和空對象的效果。不過需要注意的是，這個方法會將對象中的函數(shù)或非原始類型的屬性轉(zhuǎn)換為字符串形式，因?yàn)?JSON 只支持原始數(shù)據(jù)類型。

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() 方法遍歷這些屬性，并構(gòu)建新的對象，只包含非空值的屬性。

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() 方法接受一個函數(shù)作為參數(shù)，用于判斷哪些屬性需要被排除。

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

結(jié)論

本文介紹了四種方法用于去除 JavaScript 對象中的空值和空對象。通過使用循環(huán)和 delete 關(guān)鍵字、JSON.stringify() 和 JSON.parse()、Object.keys() 和 reduce()，以及 Lodash 庫的 omitBy() 方法，你可以根據(jù)項(xiàng)目需求選擇最適合的方法。在處理大型對象時，建議使用 Lodash 庫，它提供了更多的功能和靈活性。不論你選擇哪種方法，去除空值和空對象能讓你得到更整潔、更易讀的數(shù)據(jù)，提高 JavaScript 代碼的質(zhì)量和可維護(hù)性。