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

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

zonemu2个月前 (07-10)技术文章15

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

大家好,我是大澈!

本文约 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] 。

相关文章

Gitlab 的使用和代码审查流程介绍

1、先简洁介绍下项目常用的信息-面板统计页面2、用户信息面板3、服务器信息4、项目信息5、重点介绍代码提交审核机制和授权合并机制开发人员推送代码的时候不能直接推送到master,否则就会报错。此时开发...

程序员效率提升!使用自动化工具gitx,每周节约半小时

你是否经历过这样的折磨?一个 JIRA 需求要同时修复 dev、qa、staging 三个分支每个版本涉及 A、B、C 三个项目手动执行以下操作:从 dev 切临时分支cherry-pick 提交推送...

聊城职院获省赛“HTML5交互融媒体内容设计与制作”赛项一等奖

11月25日,山东省职业院校技能大赛(高职组)“HTML5交互融媒体内容设计与制作”赛项在威海海洋职业学院学院圆满结束。学校信息工程系由计算机应用技术专业学生张慧、冯媛、王海阔三名学生组成的参赛团队,...

在html5页面中如何使用vue3(html页面引入vue组件)

今天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:<html><scri...

HTML5与APP的抉择(h5与app的区别)

同为当下炙手可热的技术,围绕APP和HTML5难免少不了各种争辩。而在“互联网+”时代,许多面临转型的传统企业,也在选择转型工具时,陷入了HTML5或APP的纠结抉择之中……到底该选择HTML5还是A...

2025最值得入手的AI数据分析工具:奥威BI深度评测报告

一、引言在数字化时代,数据已成为企业决策的重要依据。然而,海量数据的处理与分析往往耗费大量时间与精力。为此,AI数据分析工具应运而生,其中奥威BI作为一款备受瞩目的产品,凭借其强大的功能与智能特性,成...