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

news/2025/2/13 5:58:16/

如下,对于一个多层嵌套的数据结构:例如
要做的就是删除所有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.ppmy.cn/news/47848.html

相关文章

markdown基本语法

来自神秘人儿的投稿! markdown的使用,可以参考https://markdown.com.cn/basic-syntax/ 标题:用 # 表示 段落:enter即可,两端之间有一个空行 换行:一行的末尾加两个或者多个空格,两端之间没有…

Python双向循环链表的操作

目录 一、双向循环链表 双向循环链表图 二、双向循环链表的操作 1、判断链表是否为空 2,链表长度 3,遍历整个链表 4,在链表头部添加元素 5、链表尾部添加元素 6,在指定位置插入元素 7,修改指定位置的元素 8&a…

Java 并发工具合集 JUC 大爆发!!!

并发工具类 通常我们所说的并发包也就是 java.util.concurrent (JUC),集中了 Java 并发的各种工具类, 合理地使用它们能帮忙我们快速地完成功能 。 1. CountDownLatch CountDownLatch 是一个同步计数器,初始化的时候 传入需要计数的线程等待数…

js和jQuery知识点总结

目录 一.jQuery知识点梳理 1.jQuery入门&选择器 案例1 表格隔行换色 二.$工具方法&属性&CSS 案例2:实现全选功能 三.筛选&过滤&位置 案例3.实现返回顶部功能 四.事件&效果 二.JavaScript知识点梳理 一.js核心语法 二.函数和wind…

29考虑特性分布的储能电站接入的电网多时间尺度源储荷协调调度策略MATLAB程序-日前日内实时+需求响应+协调调度

资源地址: 29考虑特性分布的储能电站接入的电网多时间尺度源储荷协调调度策略MATLAB程序-日前日内实时需求响应协调调度-Matlab文档类资源-CSDN文库 参考文献: 考虑特性分布的储能电站接入的电网多时间尺度源储荷协调调度策略——金力 主要内容&…

【数据聚类|深度聚类】Heterogeneous Tri-stream Clustering Network(HTCN)论文研读

文章目录 AbstractIntroductionRelated WorkDeep ClusteringSelf-supervised LearningProposed FrameworkFramework OverviewInstance-level ContrastivenessCluster-level ContrastivenessOverall Loss FunctionImplementation DetailsExperimentsDatasets and Evaluation Met…

尚硅谷_宋红康_第17章_反射机制

第17章_反射机制 本章专题与脉络 1. 反射(Reflection)的概念 1.1 反射的出现背景 Java程序中,所有的对象都有两种类型:编译时类型和运行时类型,而很多时候对象的编译时类型和运行时类型不一致。 Object obj new String(“hello”); obj.ge…

AgentGPT,免费易用的 Auto-GPT 平替

你问 ChatGPT 答,属于单线问答式交互。但如果你问Auto-GPT,他会分解成N个任务,并且在遇到任务无法完成后,会尝试其它的方式来完成任务,很像老板交待你一个任务,中间的过程他不过问,遇到问题你自…