js如何删除对象/数组中null、undefined、空对象及空数组实例代码

 更新时间:2022年09月20日 14:46:11   作者:EncodingAESKey  
JS中数组是我们较为常用的一种数据结构,下面这篇文章主要给大家介绍了关于js如何删除对象/数组中null、undefined、空对象及空数组的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

如下,对于一个多层嵌套的数据结构:例如

要做的就是删除所有value为空,数组为空,对象为空的字段

const querys = {
  name: '测试',
  httpMethod: '',
  httpHeaders: [
    {
      key: 'Accept',
      value: 'test',
    },
  ],
  restParams: [
    {
      key: '',
      value: '',
    },
  ],
  body: {
    bodyType: '',
    formDataList: [
      {
        contentType: '',
        key: '',
        value: '',
      },
    ],
  },
  microtask: {
    bodyType: 'javascript',
    formDataList: [
      {
        key: '2',
        value: '4',
      },
    ],
  },
};

通过处理,希望得到 以下结构:

{
  name: '测试',
  httpHeaders: [
    {
      key: 'Accept',
      value: 'test',
    },
  ],
  microtask: {
    bodyType: 'javascript',
    formDataList: [
      {
        key: '2',
        value: '4',
      },
    ],
  },
}

第一:过滤各种空数据的字段,比如,string、null、undefined、[]、{}

使用这个方法:(注意调用两遍)

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

调用方法:

let res = delEmptyQueryNodes(delEmptyQueryNodes(params));

res就是过滤之后你要的数据了

第二:删除对象中值为空或null或undefined的所有属性(简单方法)

1、首先写一个方法判断当前值为空

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

2、删除对象中值为空的所有属性

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删除对象中带有null和undefined值的数据

把对象中的空值去掉的需求,用于提交表单,但是antd表单通过form.validateFields()方法获取到的值会存在出现undefined或null的情况,本次分享的方法简单实用,比较优雅。

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

代码:

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

代码的原理是通过Object.keys遍历对象中的key值,通过filter方法筛选出值不为null和undefined的数据。这个方法中最灵魂的地方在于用到了reduce高阶函数,reduce返回值的第二个参数传入{}初始值,通过reduce内部循环,将符合条件的数组中的属性和属性值添加到对象中去,最终返回出一个我们想要的不带空值的对象。 

总结

到此这篇关于js如何删除对象/数组中null、undefined、空对象及空数组的文章就介绍到这了,更多相关js删除对象数组中null、undefined、空对象及空数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js 数据存储和DOM编程

    js 数据存储和DOM编程

    本文主要介绍了js数据存储和DOM编程的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • BootstrapTable refresh 方法使用实例简单介绍

    BootstrapTable refresh 方法使用实例简单介绍

    本文就bootstrapTable refresh 方法如何传递参数做简单举例说明,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-02-02
  • 详解JavaScript设计模式中的享元模式

    详解JavaScript设计模式中的享元模式

    享元模式是一种用于性能优化的模式。享元模式的核心是运用共享技术来有效支持大量细粒度的对象.如果系统中创建了大量类似的对象而导致内存占用过高,本文通过介绍书中文件上传的优化案例来说明享元模式的使用方式和作用,需要的朋友可以参考下
    2023-06-06
  • 浅谈JS封闭函数、闭包、内置对象

    浅谈JS封闭函数、闭包、内置对象

    下面小编就为大家带来一篇浅谈JS封闭函数、闭包、内置对象。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript中var、let和const的用法及区别详解

    JavaScript中var、let和const的用法及区别详解

    在JavaScript中let和const是用于声明变量的关键字,并且它们相较于var具有更加灵活和安全的特性,这篇文章主要介绍了JavaScript中var、let和const的用法及区别的相关资料,需要的朋友可以参考下
    2025-04-04
  • JavaScript实现星级评价效果

    JavaScript实现星级评价效果

    这篇文章主要为大家详细介绍了JavaScript实现星级评价效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • uniapp 手机验证码输入框实现代码(随机数、倒计时、隐藏手机号码中间四位)可以直接使用

    uniapp 手机验证码输入框实现代码(随机数、倒计时、隐藏手机号码中间四位)可以直接使用

    这篇文章主要介绍了uniapp 手机验证码输入框(随机数、倒计时、隐藏手机号码中间四位),实现思路通过创建六个正方形的view,然后创建一个数字input,最大输入长度为六位(根据验证码的长度),再将input隐藏掉,获取到的值分别放到六个view中,需要的朋友可以参考下
    2023-02-02
  • 微信小程序实现签到功能

    微信小程序实现签到功能

    这篇文章主要为大家详细介绍了微信小程序实现签到功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • ES6中let、const的区别及变量的解构赋值操作方法实例分析

    ES6中let、const的区别及变量的解构赋值操作方法实例分析

    这篇文章主要介绍了ES6中let、const的区别及变量的解构赋值操作方法,结合实例形式分析了ES6中let、const的功能、原理、使用方法及数组、字符串、函数参数等解构赋值相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • 深入理解javascript学习笔记(一) 编写高质量代码

    深入理解javascript学习笔记(一) 编写高质量代码

    编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多
    2012-08-08

最新评论