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

2,816 阅读3分钟

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

includes 方法概述

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

特性深入

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

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

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

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

鲜为人知的好用做法

索引起点的巧妙使用

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

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

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

数组去重与includes联动

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

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) 值。

const listWithNaN = [NaN];
const hasNaN = listWithNaN.includes(NaN); // 返回 true

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

应用场景拓展

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

构建复杂判断逻辑

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

const allowedExtensions = ['jpg', 'jpeg', 'png'];
const file = 'portrait.png';

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

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

作为判断依据的短路效应

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

const themeColors = ['red', 'green', 'blue'];
const currentColor = 'red';

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

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

总结

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