快捷導(dǎo)航

js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組實(shí)例代碼

更新時(shí)間：2022年09月20日 14:46:11 作者：EncodingAESKey

JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

第一：過(guò)濾各種空數(shù)據(jù)的字段，比如，string、null、undefined、[]、{}
第二：刪除對(duì)象中值為空或null或undefined的所有屬性（簡(jiǎn)單方法）
第三：ES6-使用js刪除對(duì)象中帶有null和undefined值的數(shù)據(jù)
總結(jié)

如下，對(duì)于一個(gè)多層嵌套的數(shù)據(jù)結(jié)構(gòu)：例如

要做的就是刪除所有value為空，數(shù)組為空，對(duì)象為空的字段

const querys = {
  name: '測(cè)試',
  httpMethod: '',
  httpHeaders: [
    {
      key: 'Accept',
      value: 'test',
    },
  ],
  restParams: [
    {
      key: '',
      value: '',
    },
  ],
  body: {
    bodyType: '',
    formDataList: [
      {
        contentType: '',
        key: '',
        value: '',
      },
    ],
  },
  microtask: {
    bodyType: 'javascript',
    formDataList: [
      {
        key: '2',
        value: '4',
      },
    ],
  },
};

通過(guò)處理，希望得到以下結(jié)構(gòu)：

{
  name: '測(cè)試',
  httpHeaders: [
    {
      key: 'Accept',
      value: 'test',
    },
  ],
  microtask: {
    bodyType: 'javascript',
    formDataList: [
      {
        key: '2',
        value: '4',
      },
    ],
  },
}

第一：過(guò)濾各種空數(shù)據(jù)的字段，比如，string、null、undefined、[]、{}

使用這個(gè)方法：（注意調(diào)用兩遍）

export const delEmptyQueryNodes = (obj = {}) => {
  Object.keys(obj).forEach((key) => {
    let value = obj[key];
    value && typeof value === 'object' && delEmptyQueryNodes(value);
    (value === '' || value === null || value === undefined || value.length === 0 || Object.keys(value).length === 0) && delete obj[key];
  });
  return obj;
};

調(diào)用方法：

let res = delEmptyQueryNodes(delEmptyQueryNodes(params));

res就是過(guò)濾之后你要的數(shù)據(jù)了

第二：刪除對(duì)象中值為空或null或undefined的所有屬性（簡(jiǎn)單方法）

1、首先寫(xiě)一個(gè)方法判斷當(dāng)前值為空

function isEmpty(obj) {
  if (typeof obj === 'undefined' || obj === null || obj === '') return true;
  return false
}

2、刪除對(duì)象中值為空的所有屬性

var formData = {
   a: "duo",
   b: 0,
   c: undefined,
   d: null,
   e: null
}
 
function preProcessData(formData) {
  Object.keys(formData).forEach(item=>{
    if(this.isEmpty(formData[item])) {
      delete formData[item];
    }
  })
  return formData;
}

第三：ES6-使用js刪除對(duì)象中帶有null和undefined值的數(shù)據(jù)

把對(duì)象中的空值去掉的需求，用于提交表單，但是antd表單通過(guò)form.validateFields()方法獲取到的值會(huì)存在出現(xiàn)undefined或null的情況，本次分享的方法簡(jiǎn)單實(shí)用，比較優(yōu)雅。

------->>>>>>

代碼：

const params = Object.keys(data)
	.filter((key) => data[key] !== null && data[key] !== undefined)
	.reduce((acc, key) => ({ ...acc, [key]: data[key] }), {});

代碼的原理是通過(guò)Object.keys遍歷對(duì)象中的key值，通過(guò)filter方法篩選出值不為null和undefined的數(shù)據(jù)。這個(gè)方法中最靈魂的地方在于用到了reduce高階函數(shù)，reduce返回值的第二個(gè)參數(shù)傳入{}初始值，通過(guò)reduce內(nèi)部循環(huán)，將符合條件的數(shù)組中的屬性和屬性值添加到對(duì)象中去，最終返回出一個(gè)我們想要的不帶空值的對(duì)象。

總結(jié)

到此這篇關(guān)于js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組的文章就介紹到這了,更多相關(guān)js刪除對(duì)象數(shù)組中null、undefined、空對(duì)象及空數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: