网站首页 > 知识剖析 正文
本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!
大家好,我是大澈!
本文约 600+ 字,整篇阅读约需 1 分钟。
今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。
老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!
const arr = [0, 1, false, 2, "", 3];
const cleanedArray = arr.filter(Boolean);
// 输出:cleanedArray = [1, 2, 3]
分享原因
这段代码展示了数组方法的巧妙运用,通过 filter 方法结合 Boolean 函数,实现了对数组的简洁过滤操作,为处理数组元素提供了一种高效且简洁的思路。
对于需要从数组中去除特定类型(如 false、0、"" 等假值)元素的场景具有很好的参考价值。
正所谓,逻辑能简单一点就简单一点,代码能少写一行就少写一行!
代码解析
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] 。
猜你喜欢
- 2025-05-02 JS 写正则表达式,判断是否为手机号
- 2025-05-02 JS 类型检测:谈 typeof 和 instanceof 的缺陷与优化
- 2025-05-02 零起点Python机器学习快速入门-4-3-字符串常用方法
- 2025-05-02 输出、同步和异步(同步和异步输入信号的区别)
- 2025-05-02 JS 克隆对象八种技术,为何少不了 StructuredClone?
- 2025-05-02 C语言字符串操作总结大全(超详细)
- 2025-05-02 推荐一个检测 JS 内存泄漏的神器(js内存泄漏的原因及解决办法)
- 2025-05-02 模拟 Vue 中 JS 动态表达式在模版中被动态解析的实现
- 2025-05-02 解决 JS 对象中继承性问题之方式一:通过原型链继承来解决继承问题
- 2025-05-02 Python 和 JS 有什么相似?(js与python哪个更强大)
- 最近发表
-
- Zion无代码,小程序授权和解绑,无代码开发的关键
- 韦德二儿子“变”女儿,韦德支持儿子,与魔术师约翰逊经历相同
- 新鞋速报|Swoosh 面世 50 年!Nike Waffle Trainer 2致敬 Nike 的起源
- 李宁韦德之道2低帮版"踏冰" 球鞋曝光
- Zion又壮了!首秀顶翻1.9亿内线!英格拉姆单臂隔扣
- 音乐手游《zion载音》迎更新 钢琴白发少女免费带回家
- AI 应用赚钱工具哪家强?Coze 和 Zion 对比分析
- 韦德12岁次子完成变性手术,心情雀跃身姿妖娆
- 韦德晒全家福,他穿浴袍像中东土豪,二儿子扎雅比尤尼恩还性感
- 每日NBA球星上脚球鞋「5月12日」(近期nba球星上脚球鞋)
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)