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

news2025/3/10 19:28:34

如下,对于一个多层嵌套的数据结构:例如
要做的就是删除所有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;
};

调用方法:(res就是过滤之后你要的数据)

let res = delEmptyQueryNodes(delEmptyQueryNodes(params));

第二:删除对象中值为空或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值的数据

  const requestParams= {
    current: 1,
    pageSize:10,
    username: '',
    usercode: null
  }
  // 希望得到以下数据
    const requestParams= {
    current: 1,
    pageSize:10,
  }
 let newParams = Object.keys(requestParams)
    .filter((key) => requestParams[key] !== null && requestParams[key] !== undefined && requestParams[key] !== '')
    .reduce((acc, key) => ({ ...acc, [key]: requestParams[key] }), {});
console.log(newParams)

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/433483.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GZIPOutputStream GZIPInputStream 数据压缩解压

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 数据压缩&解压 前言一、最终走上了压缩的路 GZIPOutputStream二、收到数据进行解压 GZIPInputStream三、测试Demo四、验证结果总结 前言 最近接手了一批性能优化… 遇到…

全注解下的SpringIoc

Spring架构中的核心理念就是IOC和AOP,可以说,Spring的强大离不开这两大特性。 因为spring boot推荐采用注解开发,所以文中主要介绍基于注解的Spring Ioc。 IoC容器简介 Spring IoC 容器是个管理 Bean(在Spring 中把每个需要管理…

VMware vCenter Server 8.0U1 发布 - 集中式管理 vSphere 环境

请访问原文链接:VMware vCenter Server 8.0U1 - 集中式管理 vSphere 环境,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 2023-04-18, VMware vSphere 8.0U1 发布。 详见:VMware vSphere 8 Update 1 新…

单片机的实例——28BYJ48步进电机

整体过程 准备资料1,步进电机内部结构示意图2,步进电机命名3,实际结构的转速比4,数值的含义5,实际内部主动轮结构分析实际内部机构及接线定子部分转子部分 定子和转子磁极的工作分析 6,工作时序7&#xff0…

机器学习 day06(向量化应用于多元线性回归的梯度下降算法,正规方程)

向量化多元线性回归,及梯度下降算法 将W₁,…,Wn写成向量W,将X₁,…,Xn写成向量X,而b还是之前的b注意:在多元线性回归的梯度下降算法中,Wj是指从W₁到Wn中的某一项&…

堆排序及top-k问题

堆排序及top-k问题 堆排序建堆向上调整建堆向下建堆 堆排序 top-k问题,建堆的应用 堆排序 堆排序,听名字就是要对堆进行排序,但当我们是无序数据时,首先我们就需要建立一个堆 建堆 这里让我们来回忆一下前面的堆,改…

Springboot基础学习之(二十三):实现定时任务

定时任务:在开发过程中是经常能够使用到的:定时发布邮件等等 先了解一下什么时cron表达式? 它是定义执行任务时间的一种时间表达式,使用方法 Scheduled(cron "0/2 * * * * ? "),这里代码的含义是每两秒执行…

适用于 Windows 的 5 个最好的 PDF 转换器应用程序

由于稳定性、高分辨率、高安全性、易于传输等特点,PDF已经成为我们日常工作中最常用的格式。我们在享受PDF带来便利的同时,也发现PDF带来了一些不便,其中最大的问题就是PDF内容的编辑难度。同时,并不是所有的文件都是PDF格式的&am…

【redis】Redis为什么能抗住10万并发?

文章目录1. Redis简介2. 内存操作3. 丰富的对象类型4. 高效的数据结构5. 单线程模型6. 多路IO复用模型7. 总结1. Redis简介 Redis是一个开源的,基于内存的,高性能的键值型数据库。它支持多种数据结构,包含五种基本类型 String(字…

搭建vue3项目+按需引入element-ui框架组件

场景:使用vue create脚手架快速搭建vue的项目 前提:需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索 1.使用dos命令安装vue-cli脚手架 //这个是从镜像源下载 cnpm install -g vue/cli 查…

设计模式简述

设计模式(简述) 设计模式的分类 ​ 根据目的可以分为创建型、结构性和行为型三类: 创建型模型:创建对象结构性模型:处理类或对象的组合行为型模式:用于描述对类或对象怎样交互和怎么分派职责 ​ 根据范围可以分为类模式和对象…

13.基于双层优化的电动汽车日前-实时两阶段市场竞标

MATLAB代码:基于双层优化的电动汽车日前-实时两阶段市场竞标 关键词:日前-实时市场竞标 电动汽车 双层优化 编程语言:MATLAB平台 内容简介:代码主要做的是电动汽车充电站市场竞标策略,采用双层优化模型对电动汽车…

Redis缓存穿透、击穿、雪崩面试题详解

缓存穿透 问题: 指的是客户端请求的数据在缓存中找不到,数据库中也没有存储,客户端还不断的发起请求。这样每次都无法在数据库查询到,缓存中永远没有这个数据。 ​ 这样的话,客户端一直去访问,会给后端数据…

【观察】解读新一代戴尔AMD服务器:场景优化为先,筑牢数字化底座

毫无疑问,今天算力就是生产力已成为业界共识,特别是算力作为数字经济时代的关键生产力要素,更成为了挖掘数据要素价值,推动数字经济发展的核心支撑力和驱动力。 在此过程中,由算力驱动的数字经济除了以信息产业这一独立…

老胡的周刊(第087期)

老胡的信息周刊[1],记录这周我看到的有价值的信息,主要针对计算机领域,内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 🎯 项目 Auto-GPT[2] Auto-GPT 是一个实验性的开源应…

极简sklearn-使用决策树预测泰坦尼克号幸存者

泰坦尼克号幸存者数据集是kaggle竞赛中入门级的数据集,今天我们就来用决策树来预测下哪些人会成为幸存者。 数据集下载地址: https://download.csdn.net/download/ting4937/87630361 数据集中包含两个csv文件,data为训练用数据,test为测试集。 探索数据…

通过HBuilderX运行uniapp到微信者开发工具

目录 一、安装开发工具 二、配置运行微信开发者工具 三、异常处理 1.[微信小程序开发者工具] ? Enable IDE Service (y/N) [27D[27C 2. [error] Error: Fail to open IDE 3.[app.json 文件内容错误] app.json: 在项目根目录未找到 app.json 一、安装开发工具 安装HBuil…

如今的就业环境下,怎样才能跻身于高收入的IC行业?

看到不少人失业找工作,其实现在不光是大学生难找工作,在职的人工作也不怎么开心。 要么累,要么没前途。 要么又累又没前途。 总的占个啥吧,现在大家面临的问题就是工作时间越来越久,人际关系也搞得很压抑&#xff0…

初识linux之线程同步与生产者消费者模型

目录 一、线程同步的概念 1. 饥饿状态 2. 同步的概念 二、生产者消费者模型 1. 生产者消费者模型基本概念 2. 生产者、消费者之间的关系 2.1 消费者与消费者的关系 2.2 生产者和生产者的关系 2.3 生产者和消费者的关系 3. “321”原则 4. 消费者与生产者模型的特点 …

C++数据结构:STL

数据结构和算法简介 数据结构 数据结构是相互间存在特定关系的数据的集合,分为逻辑结构和物理结构。 逻辑结构 反映数据元素之间的逻辑关系的数据结构,其中的逻辑关系是指数据元素之间的前后件关系,而与他们在计算机中的存储位置无关 集…