如何去除 JavaScript 对象中的空值和空对象

在 JavaScript 开发中,我们经常需要处理对象数据,但有时这些对象可能包含一些空值或空对象。在处理数据时,通常需要将这些空值或空对象去除,以便得到更干净、更紧凑的数据结构。本文将介绍几种方法,教你如何去除 JavaScript 对象中的空值和空对象。

方法一:使用循环和 delete 关键字

第一种方法是通过循环遍历对象的每个属性,并使用 delete 关键字从对象中删除空值或空对象。这个方法比较直接,适用于处理较小的对象。

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

方法二:最简洁的,使用 JSON.stringify() 和 JSON.parse()

第二种方法是先将对象转换为 JSON 字符串,再将 JSON 字符串转换回对象。在这个过程中,JSON.stringify() 方法会自动去除 null 值,从而达到去除空值和空对象的效果。不过需要注意的是,这个方法会将对象中的函数非原始类型的属性转换为字符串形式,因为 JSON 只支持原始数据类型。

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() 方法获取对象的所有属性键,然后使用 reduce() 方法遍历这些属性,并构建新的对象,只包含非空值的属性。

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 库

第四种方法使用 Lodash 库的omitBy()方法,它可以很方便地去除对象中的空值和空对象。omitBy() 方法接受一个函数作为参数,用于判断哪些属性需要被排除。

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

结论

本文介绍了四种方法用于去除 JavaScript 对象中的空值和空对象。通过使用循环和 delete 关键字、JSON.stringify()JSON.parse()Object.keys()reduce(),以及 Lodash 库的 omitBy() 方法,你可以根据项目需求选择最适合的方法。在处理大型对象时,建议使用 Lodash 库,它提供了更多的功能和灵活性。不论你选择哪种方法,去除空值和空对象能让你得到更整洁、更易读的数据,提高 JavaScript 代码的质量和可维护性。

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

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

相关文章

https请求异常引发(Received fatal alert: unrecognized_name):如何快速解决项目中问题?

总结思考:如何做一个出色的开发者? 首先我们要承认我们大部分程序员是应用开发,不是操作系统、协议、框架开发等这类底层开发者。 其一:是否能快速定位问题。如找到出现问题的代码,bug出现在哪一行,哪个应…

Django实现音乐网站 ⑷

使用Python Django框架制作一个音乐网站,在系列文章3的基础上继续开发, 本篇主要是后台歌曲类型表、歌单表模块功能开发。 目录 表结构设计 歌曲类型表结构 歌单表结构 创建表模型 创建表 后台注册表模型 引入表模型 后台自定义 总结 表结构设计…

SpringBoot使用JKS或PKCS12证书实现https

SpringBoot使用JKS或PKCS12证书实现https 生成JKS类型的证书 可以利用jdk自带的keytool工具来生成证书文件, 默认生成的是JKS证书 cmd命令如下: 执行如下命令,并按提示填写证书内容,最后会生成server.keystore文件 keytool -genkey tomcat…

在Ruoyi中采用Ajax动态生成Echarts图表实践

前言 在之前博文中,我们讲解了如何使用java在后台进行Echarts的图表生成组件,博文如下: 序号 博客连接1一款基于JAVA开发的Echarts后台生成框架2Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法3解决Ruoyi单体版本集成Echarts多图表时…

uni、css——制作表格样式的模型

案例展示 这里以5列做展示&#xff08;可随意调节&#xff09; 案例代码 <view class"list"><view class"item" v-for"(item,index) in list" :key"index">1</view> <!-- 有内容 --><view clas…

蓝桥 13期 java c组 特殊日期

【问题描述】 2022 年 2 月 22 日 22:20 是一个很有意义的时间&#xff0c;年份为 2022&#xff0c;由 3 个 2 和 1 个 0 组 成&#xff0c;如果将月和日写成 4 位&#xff0c;为 0222&#xff0c;也是由 3 个 2 和 1 个 0 组 成&#xff0c;如果将时间中的时和 分写成 4 位&am…

redis五种数据类型介绍

、string&#xff08;字符串&#xff09; 它师最基本的类型&#xff0c;可以理解为Memcached一模一样的类型&#xff0c;一个key对应一个value。 注意&#xff1a;一个键最大能存储 512MB。 特性&#xff1a;可以包含任何数据,比如jpg图片或者序列化的对象,一个键最大能存储512…

《Java-SE-第二十八章》之CAS

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水平很有限&…

SpringCloudAlibaba之Sentinel(一)流控篇

前言&#xff1a; 为什么使用Sentinel&#xff0c;这是一个高可用组件&#xff0c;为了使我们的微服务高可用而生 我们的服务会因为什么被打垮&#xff1f; 一&#xff0c;流量激增 缓存未预热&#xff0c;线程池被占满 &#xff0c;无法响应 二&#xff0c;被其他服务拖…

面向视频会议场景的 H.266/VVC 码率控制算法研究

文章目录 面向视频会议场景的 H.266/VVC 码率控制算法研究个人总结摘要为什么要码率控制码率控制的关键会议类视频码率控制研究背景视频会议系统研究现状目前基于 R-λ模型的码率控制算法的问题文章主要两大优化算法优化算法1&#xff1a;基于视频内容相关特征值的码率控制算法…

Python开发环境Spyder介绍

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 Spyder简介 Spyder (前身是 Pydee) 是一个强大的交互式 Python 语言开发环境&#xff0c; 提供高级的代码编辑、交互测试、调试等特性&#xff0c;支持包括 Windows、Linux 和 OS X 系统。 &#x1f447; &#x1f44…

14-3_Qt 5.9 C++开发指南_QUdpSocket实现 UDP 通信_UDP 单播和广播

文章目录 1.UDP通信概述2. UDP 单播和广播2.1 UDP 通信实例程序功能2.2 主窗口类定义和构造函数2.3 UDP通信的实现2.4 源码2.4.1 可视化UI设计2.4.2 mainwindow.h2.4.3 mainwindow.cpp 1.UDP通信概述 UDP(User Datagram Protocol&#xff0c;用户数据报协议)是轻量的、不可靠的…

基于边缘无线协同感知的低功耗物联网LPIOT技术:赋能智慧园区方案以及数字工厂领域

回到2000年左右&#xff0c;物联网的底层技术支撑还是“ZigBee”&#xff0c;虽然当时ZigBee的终端功耗指标其实也并不庞大&#xff0c;但是&#xff0c;“拓扑复杂导致工程实施难度大”、“网络规模小导致的整体效率低下”都成为限制其发展的主要因素。 LPWAN&#xff0c;新一…

第一百零三回 全局共享数据之Provider

文章目录 知识回顾使用方法示例代码 我们在上一章回中介绍了 组件之间共享数据相关的内容&#xff0c;本章回中将继续介绍该内容.闲话休提&#xff0c;让我们一起Talk Flutter吧。 知识回顾 我们在前面章回中介绍了全局共享数据相关的内容&#xff0c;当时介绍了获取共享数据…

Android Tencent Shadow 插件接入指南

Android Tencent Shadow 插件接入指南 插件化简述一、clone 仓库二、编译运行官方demo三、发布Shadow到我们本地仓库3.1、安装Nexus 3.x版本3.2、修改发布配置3.3、发布仓库3.4、引用仓库包 四、编写我们自己的代码4.1、新建项目导入maven等共同配置4.1.1、导入buildScript4.1.…

51单片机学习--LED点阵屏显示图形动画

为了通用性考虑&#xff0c;需要把用到的几个口用特殊位声明来重新命名&#xff0c;由于RCLK在头文件中已有定义&#xff0c;所以这里把P3^5声明成RCK吧。。这样的做法可以提高可读性 sbit RCK P3^5; //RCLK sbit SCK P3^6; //SRCLK sbit SER P3^4;接下来编写74HC595的输…

bash引用-Quoting详细介绍

bash引用-Quoting详细介绍 概述 引用的字面意思就是&#xff0c;用引号括住一个字符串。这可以保护字符串中的特殊字符不被shell或shell脚本重新解释或扩展。(如果一个字有不同于其字面意思的解释&#xff0c;它就是“特殊的”。例如&#xff1a;星号*除了本身代表*号以外还表…

dflow工作流使用1——架构和基本概念

对于容器技术、工作流等概念完全不懂的情况下理解dflow的工作方式会很吃力&#xff0c;这里记录一下个人理解。 dflow涉及的基本概念 工作流的概念很好理解&#xff0c;即某个项目可以分为多个步骤&#xff0c;每个步骤可以实现独立运行&#xff0c;只保留输入输出接口&#x…

【方法】Excel表格如何拆分数据?

当需要把多个数据逐个填到Excel单元格的时候&#xff0c;我们可以利用Excel的数据拆分功能&#xff0c;可以节省不少时间。 小编以下面的数据为例&#xff0c;看看如何进行数据拆分。 首先&#xff0c;要选择数字所在的单元格&#xff0c;然后依次点击菜单栏中的“数据”>…

Spring中的事务

一、为什么需要事务&#xff1f; 事务定义 将一组操作封装成一个执行单元&#xff08;封装到一起&#xff09;&#xff0c;要么全部成功&#xff0c;要么全部失败。 为什么要用事务&#xff1f; 比如转账分为两个操作&#xff1a; 第一步操作&#xff1a; A 账户 -100 元…