JS中数组的includes鲜为人知但极其好用的做法

JavaScript的宝库中藏着无数精妙绝伦的工具,Array.prototype.includes 方法便是其中的隐秘瑰宝。它简单明了,用途明确。当数组中元素的查找成为需求时,includes 比起其它成员犹如一缕轻风,吹散了开发者面前的迷雾,直指问题的核心。本文旨在挖掘 includes 方法的潜能,分享其不为人知的妙用并详细讨论其在数组处理中的优势。

includes 方法概述

出自 ES2016(即 ES7),includes 方法提供了一种便捷的方式,用于检查数组是否包含某个特定的元素。与用索引检索与比较元素的传统途径相比,includes 方法用其简洁性和直觉性赢得了开发者的青睐,成为现代 JavaScript 编程中不可或缺的一部分。

特性深入

使用 includes 方法时,只需传递所需寻找的元素,它便会返回一个布尔值,即数组中是否存在该元素。

javascript 复制代码
const fruits = ['apple', 'banana', 'mango', 'orange'];
const hasMango = fruits.includes('mango'); // 返回 true

如上例所述,寻找 mango 在数组 fruits 中是否存在,includes 方法返回了肯定的答案。

然而,includes 用于检测包含关系的特性并非仅止于此。深挖其用法,还可以在复杂的数据处理任务中找到其它的灵活运用。

鲜为人知的好用做法

索引起点的巧妙使用

许多人可能不知道,includes 方法还接受第二个参数,用以指定搜索的起始索引。

javascript 复制代码
const array = ['a', 'b', 'c', 'd', 'a', 'b'];
const includesFromIndex = array.includes('a', 3); // 返回 true

在上述代码片段中,includes 从索引3开始搜索 'a',由于数组中索引为4的位置确实存在 'a',因此返回了 true

数组去重与includes联动

在过滤数组以创建不含重复元素的新数组时,includes 发挥了显著作用。

javascript 复制代码
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.filter((v, i, a) => a.indexOf(v) === i);

在其他编程模式中,通过在 filter 函数中运用 includes 方法,也能达到类似的效果。

与NaN的特殊情缘

includes 方法解决了 indexOf 在 JavaScript 中的一个古老难题 ------ 它能够正确识别 NaN (Not-a-Number) 值。

javascript 复制代码
const listWithNaN = [NaN];
const hasNaN = listWithNaN.includes(NaN); // 返回 true

正如例子所示,当数组中包含 NaN 时,尽管 NaN 本身并不等于自己,借助 includes 方法依然能够有效地检测到其存在。

应用场景拓展

除了基础查找之外,includes 方法还能在许多有趣而富有挑战性的情境中发光发热。

构建复杂判断逻辑

在进行多条件判断时,includes 可配合数组提供便捷与强大的逻辑判断支持。

javascript 复制代码
const allowedExtensions = ['jpg', 'jpeg', 'png'];
const file = 'portrait.png';

const isValidExtension = allowedExtensions.includes(file.split('.').pop());

上例中,通过 includes 方法验证文件扩展名是否为允许的格式,显示出了 includes 在处理字符串和条件逻辑中的强大威力。

作为判断依据的短路效应

includes 可用于短路表达式------一种常见的编程技巧,旨在简化代码的复杂性。

javascript 复制代码
const themeColors = ['red', 'green', 'blue'];
const currentColor = 'red';

themeColors.includes(currentColor) && changeTheme(currentColor);

如示例所示,若当前颜色包含在主题颜色数组内,便执行改变主题的操作。这是一种简洁且富有表达力的方法,经由 includes 的助力确保了高效与聪明的代码风格。

总结

Array.prototype.includes 方法以其简明直观解答了类似于"是否存在"的查询的问题,但通过探索其用法的深层次,发觉其在现代 JavaScript 应用中的潜力远超初见。从基本的元素查找到复杂的逻辑判断,从优雅的短路效应到对NaN的特殊处理,includes 在数组操作中确立了自己的有力地位。欲实现JavaScript编程的精湛与高效,切莫低估 includes 这一图书馆中的草莽英雄,其潜在的巧妙运用足以让人惊叹。

相关推荐
怕浪猫2 小时前
FDE 如何正确解决现场项目工程性的问题
前端·后端·ai编程
西瓜太郎12342 小时前
外层模型卡片与分组详情成功率不一致,应该怎么排查?
前端·typescript·go·软件工程·react
GreenTea2 小时前
vLLM 与 SGLang KV Cache 底层实现机制深度调研报告
前端·后端·算法
几何心凉5 小时前
没有万能模型:我用 AiiOnly Token Plan,把多款大模型的长处拼进同一个项目
前端
kyriewen5 小时前
Claude Code 的额度今天缩水了17%——官方公告上写的是"永久提高25%"
前端·ai编程·claude
雪芽蓝域zzs6 小时前
vue解构平铺VS对象包裹
前端·javascript·vue.js
风骏时光牛马7 小时前
从零到实战,完整AI学习路线
前端
三十而立洋7 小时前
深入理解 Monorepo:子包安装依赖
前端·前端工程化
IT_陈寒7 小时前
Java Stream处理大集合,我的内存怎么就炸了
前端·人工智能·后端
Captaincc8 小时前
AI 用量桌面端-桌面宠物自定义指南
前端·人工智能