快捷導(dǎo)航

去除JavaScript對(duì)象中空值和空對(duì)象的四種方式

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

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

前言

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

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

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

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

方法二：最簡(jiǎn)潔的，使用 JSON.stringify() 和 JSON.parse()

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

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() 方法獲取對(duì)象的所有屬性鍵，然后使用 reduce() 方法遍歷這些屬性，并構(gòu)建新的對(duì)象，只包含非空值的屬性。

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 庫(kù)

第四種方法使用 Lodash 庫(kù)的omitBy()方法，它可以很方便地去除對(duì)象中的空值和空對(duì)象。omitBy() 方法接受一個(gè)函數(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 對(duì)象中的空值和空對(duì)象。通過(guò)使用循環(huán)和 delete 關(guān)鍵字、JSON.stringify() 和 JSON.parse()、Object.keys() 和 reduce()，以及 Lodash 庫(kù)的 omitBy() 方法，你可以根據(jù)項(xiàng)目需求選擇最適合的方法。在處理大型對(duì)象時(shí)，建議使用 Lodash 庫(kù)，它提供了更多的功能和靈活性。不論你選擇哪種方法，去除空值和空對(duì)象能讓你得到更整潔、更易讀的數(shù)據(jù)，提高 JavaScript 代碼的質(zhì)量和可維護(hù)性。

總結(jié)

到此這篇關(guān)于去除JavaScript對(duì)象中空值和空對(duì)象的四種方式的文章就介紹到這了,更多相關(guān)JS對(duì)象中空值和空對(duì)象去除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: