从 JavaScript 中的数组中删除空对象

news2024/9/30 19:26:17

从数组中删除空对象:

  1. 使用 Array.filter() 方法遍历数组。
  2. 将每个对象传递给 Object.keys() 方法并检查键的长度是否不等于 0。
  3. filter 方法将返回一个不包含空对象的新数组。
const arr = [{}, {id: 1}, {}, {id: 2}, {}];

const results = arr.filter(element => {
  if (Object.keys(element).length !== 0) {
    return true;
  }

  return false;
});

// 👇️ [{id: 1}, {id: 2}]
console.log(results);

JavaScript 中的数组中删除空对象

我们传递给 Array.filter 方法的函数被数组中的每个元素(对象)调用。

如果函数返回真值,则 filter 方法将该元素添加到结果数组。

Object.keys 方法返回一个包含对象键的数组。

console.log(Object.keys({})); // 👉️ []

console.log(Object.keys({id: 1})); // 👉️ ['id']

如果对象没有键值对,则该方法返回一个空数组。

如果它至少有 1 个键值对,我们只返回 true 并将对象添加到结果数组。

请注意 ,如果使用空数组 [] 或数字 0 调用 Object.keys(obj).length 方法将返回 0。

console.log(Object.keys(0).length); // 👉️ 0

console.log(Object.keys([]).length); // 👉️ 0

如果我们的数组包含对象以外的类型,请使用以下方法仅从数组中删除空对象。

const arr = [{}, {id: 1}, 'a', 0, {}, []];

const results = arr.filter(element => {
  if (
    typeof element === 'object' &&
    !Array.isArray(element) &&
    Object.keys(element).length === 0
  ) {
    return false;
  } else {
    return true;
  }
});

// 👇️ [{id: 1}, 'a', 0, []]
console.log(results);

JavaScript 中的数组中删除空对象2

我们使用 &&(与)运算符来指定必须满足所有条件才能运行 if 块。

我们首先检查元素是否有对象类型,但这还不够,因为 JavaScript 数组也有对象类型。

console.log(typeof []) // 👉️ 'object'

然后我们检查元素不是数组并且对象是空的。

如果满足所有这些条件,我们就知道我们有一个空对象,不应将其添加到结果数组中,因此我们返回 false。

在所有其他情况下,数组元素不是空对象并被添加到新数组中。

大多数情况下,在数组中存储多种不同类型是一种反模式。 如果我们需要在同一个数组中存储不同的类型,很可能是做错了什么。

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

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

相关文章

scrum看板视图切换时间线视图做项目管理

企业需要开发一个项目,可以制作时间线进行管理,以便参与者和管理者了解项目的时间进度。项目进行到哪一步,参与者有哪些,责任人是谁,这些都可以通过时间线进行展示。「时间线视图」是一种比甘特图更轻量、更实用的工具…

Chapter6:机器人SLAM与自主导航

ROS1{\rm ROS1}ROS1的基础及应用,基于古月的课,各位可以去看,基于hawkbot{\rm hawkbot}hawkbot机器人进行实际操作。 ROS{\rm ROS}ROS版本:ROS1{\rm ROS1}ROS1的Melodic{\rm Melodic}Melodic;实际机器人:Ha…

【Spring Cloud Alibaba】001-单体架构与微服务架构

【Spring Cloud Alibaba】001-单体架构与微服务 文章目录【Spring Cloud Alibaba】001-单体架构与微服务一、单体架构1、单体应用与单体架构2、单体应用架构图3、单体架构优缺点优点缺点二、微服务1、微服务的“定义”2、微服务的特性3、微服务架构图4、微服务的优缺点优点缺点…

Python自动批量修改文件名称的方法大全

前言本文介绍基于Python语言,按照一定命名规则批量修改多个文件的文件名的方法。已知现有一个文件夹,其中包括班级所有同学上交的作业文件,每人一份;所有作业文件命名格式统一,都是地信1701_姓名_学习心得格式。现需要…

论文解读:(TransA)TransA: An Adaptive Approach for Knowledge Graph Embedding

简介 先前的知识表示方法:TransE、TransH、TransR、TransD、TranSparse等。的损失函数仅单纯的考虑hrh rhr和ttt在某个语义空间的欧氏距离,认为只要欧式距离最小,就认为h和th和th和t的关系为r。显然这种度量指标过于简单,虽然先…

榜上有名丨创新微MinewSemi荣登“物联之星”投资价值榜和创新产品榜

春风送暖,喜讯连连!2023年2月7日,“2022物联之星”中国物联网产业年度榜单评选结果正式公布。经过层层评选,深圳创新微技术有限公司有幸在本届物联之星大奖中,荣获2022“物联之星”年度榜单之中国物联网企业投资价值50…

信号完整性设计规则之单根信号失真最小化

本文内容从《信号完整性与电源完整性分析》整理而来,加入了自己的理解,如有错误,欢迎批评指正。 1. 通常采用所能容许的最长上升边。 上升边越短,带宽越大,信号完整性问题越严重。 2. 使用可控阻抗走线。 可控阻抗…

硬件_IMX6ULL的LCD控制器

硬件_IMX6ULL的LCD控制器 文章目录硬件_IMX6ULL的LCD控制器一、 LCD控制器模块介绍1.1 硬件框图1.2 数据传输与处理1.3 时序控制二、 LCD控制器寄存器简介2.1 LCDIF_CTRL寄存器2.2 LCDIF_CTRL1寄存器2.3 LCDIF_TRANSFER_COUNT寄存器2.4 LCDIF_VDCTRL0寄存器2.5 LCDIF_VDCTRL1寄…

基础篇—一文掌握css的边框属性

CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 1、边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 2、边框宽度 您可以通过 border-width 属性为边框指定宽度。 为边框指定宽度有两种方法:可以指定长度值,比如 2px…

检查nmos管是否损坏

NCEP85T14 功率mos管为例 以NMOS举例,只用万用表二极管档测量MOS管的好坏-电子发烧友网 NMOS的D极和S极之间有一个寄生二极管,方向为S到D,利用二极管单向导电性以及MOS管导通时寄生二极管截止的特性,可以快速测量MOS好坏。 1、测…

搭建Hexo博客-第2章-Hexo基本用法

搭建Hexo博客-第2章-Hexo基本用法 搭建Hexo博客-第2章-Hexo基本用法 搭建Hexo博客-第2章-Hexo基本用法 大家好,在上一篇文章中,我们学习了 Git 、GitHub 和 Coding 的基本用法,在这一节中,我将介绍 Hexo 的基本用法。阅读完这篇…

举个栗子~Tableau 技巧(251):统一多个工作表的坐标轴范围

在工作汇报场景,有一个很常见、很多数据粉反馈的需求:同一看板上的两个图表,因为轴范围不一致(如下图),很难直观比较。有什么办法可以统一它们的坐标轴范围呢? 类似需求,不论两个还是…

SpringCloud学习笔记 - @SentinelResource的fallbackblockHandler配置详解 - sentinel

1. sentinel服务负载均衡测试 sentinel默认开启了负载均衡的轮询模式,为了测试sentinel服务负载均衡的效果,需要先创建两个服务提供者和一个服务消费者。 1.1. 分别创建两个服务提供者-支付服务9003、9004 1. 添加pom依赖: 提供者只需要将…

ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过

ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过 问题背景 在写一个Vue练手项目时,我使用rulse对表单中用户输入的数据进行校验,但莫名奇妙就发现:当我点击提交表单时,表单中的数据都验证成功了,但是…

SpringBoot分页实现

简介 分页功能是一个简单但必需的功能,在 SpringBoot 中分页实现非常的简单,有多种实现方式;主要和项目集成的持久层框架有关;这里主要介绍集成 MyBatis 和 SpringDataJpa 的分页实现 Mybatis - 使用 PageHelper 分页 首先在 p…

mybatis源码中一级和二级缓存分析

mybatis中,一级缓存的作用域为一个会话内; 二级缓存的作用域为全局的,可在多个会话中使用 1、一级缓存 [此处不讨论开启二级缓存的代码逻辑] 一级缓存的作用域在同一个事物中起作用。真正执行sql的是在 Executor;类图如下; 1.1、生成 Executor对象的…

玩转代码|使用acme.sh在Ubuntu配置Let’s Encrypt免费通配符SSL证书

📣今日作品:使用acme.sh在Ubuntu配置Let’s Encrypt免费通配符SSL证书👦 创作者:Jum朱⏰预计花费:10分钟📖个人主页: Jum朱博客的个人主页acme.sh 是一款方便,强大的 Lets Encrypt 域名证书申请…

反射内存卡读写测试(RFM2gRead和RFM2gWrite)-- C++

一、函数介绍: 1.1 RFM2gWrite STDRFM2GCALL RFM2gWrite( RFM2GHANDLE rh, RFM2G_UINT32 Offset, void *Buffer, RFM2G_UINT32 Length ); 说明: RFM2gWrite()函数将一个或多个I/O数据缓冲区从应用程序传输到RFM2g节点,从指定的对齐内存偏…

InVEST模型 | 02 InVEST模型Python安装

InVEST在生态系统评估领域有着广泛的应用,由于其交互界面简洁直接,大大降低了模型的使用门槛。但当需要多次、多区域的运算时,手动点击的方法十分耗时费力,针对这样的情况,InVEST团队推出了natcap.invest接口&#xff…

Centos7部署Sonic前后端和Agent 端

前言 1、sonic介绍 Sonic是一款开源、支持分布式部署、在线自动化测试的私有云真机平台,Sonic官网地址 功能特性: Sonic架构: 2、准备工作 ①准备两台设备,并安装Centos系统,设备名称简称:设备1和设…