当前位置:首页 > 技术文章 > 正文内容

最快清除数组空值?分享 1 段优质 JS 代码片段!

zonemu3个月前 (07-10)技术文章46

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!

大家好,我是大澈!

本文约 600+ 字,整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

const arr = [0, 1, false, 2, "", 3];

const cleanedArray = arr.filter(Boolean);

// 输出:cleanedArray = [1, 2, 3]


分享原因

这段代码展示了数组方法的巧妙运用,通过 filter 方法结合 Boolean 函数,实现了对数组的简洁过滤操作,为处理数组元素提供了一种高效且简洁的思路。

对于需要从数组中去除特定类型(如 false0"" 等假值)元素的场景具有很好的参考价值。

正所谓,逻辑能简单一点就简单一点,代码能少写一行就少写一行!


代码解析

1. const arr = [0, 1, false, 2, " ", 3];

首先定义了一个数组 arr,其中包含了不同类型的元素,包括数字、布尔值和空字符串。

2. const cleanedArray = arr.filter(Boolean);

filter 方法用于创建一个新的数组,其中包含特定数组过滤后的所有元素。

Boolean 函数会将传入的参数转换为布尔值。在 JavaScript 中,0、false、""(空字符串)、null、undefined 和 NaN 被视为假值,其他值被视为真值。

所以当 filter 方法使用 Boolean 函数作为回调时,会将数组 arr 中的假值元素过滤掉,只保留真值元素,最终得到新的数组 cleanedArray 为 [1, 2, 3] 。

相关文章

Vue父子组件参数传递方法(vue父子组件传参方式)

在 Vue 中,父子组件之间的参数传递是常见的需求,主要通过 Props 和 自定义事件 实现。以下是详细说明和代码示例:一、父组件向子组件传递参数(Props)父组件通过 属性 向子组件传递数据,子...

「 VUE3 + TS + Vite 」父子组件间如何通信?

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。平时使用的函数如:ref、reactive、watch、co...

GitLab-合并请求(gitlab合并请求合并者还原图解)

描述合并请求可用于在您对项目进行的其他人员之间交换代码,并轻松与他们讨论更改。合并请求的步骤步骤1-在创建新的合并请求之前,GitLab中应该有一个创建的分支。您可以参考本章来创建分支-步骤2-登录到...

在 Spring Boot3 中操作 GitLab API 的全面指南

在当今互联网大厂的后端开发工作中,高效管理代码版本和项目协作至关重要。GitLab 作为强大的版本控制系统,其 API 为开发人员提供了丰富的操作可能性。本文将深入探讨如何在 Spring Boot3...

jenkins2.107+tomcat8+jdk1.8的安装和发布代码3种方式

jenkins2.107+tomcat8+jdk1.8的安装和发布代码3种方式如果对运维课程感兴趣,可以在b站上或csdn上搜索我的账号: 运维实战课程,可以关注我,学习更多免费的运维实战技术视频1....

(在线编辑DWG)网页CAD二开实现焊接符号绘制

前言在工程制图和制造领域,焊接符号(Welding Symbols)是用于表示焊缝类型、尺寸、位置以及工艺要求的标准化图形语言。广泛应用于机械设计、钢结构、船舶制造、压力容器等行业中,帮助技术人员理解...