JavaScript判断数组成员存在的四种方法详解

前言：

在实际开发场景中，我们时常需要在数组中定位特定元素或验证其存在性。为此，本文梳理了几种主流且实用的实现方案，供开发者参考与学习。

indexOf()方法

首先提及的是indexOf()方法，该函数用于查找指定元素，并返回其在数组中首次出现的索引位置。

 [1,2,3,2].indexOf(2)  // 1

此外，该方法还支持一个可选的第二个参数，用于指定开始搜索的起始索引位置。

 [1,2,3,2].indexOf(2,2)  // 3

然而，indexOf()方法存在一个显著缺陷：其内部判断逻辑依赖于全等运算符===。这种机制导致在处理某些特殊值时会出现误判，例如对于NaN（非数字）值的判断。

[NaN].indexOf(NaN) // -1
console.log(NaN === NaN) // false

如上所示，由于上述误判机制，当数组包含NaN时，该方法无法找到匹配项，因此返回-1。针对这一痛点，ES6标准在数组原型上新增了incudes()方法，旨在替代indexOf()以解决此类问题，接下来我们将详细探讨该方法。

includes()方法

在ES6标准发布之前，仅字符串原型提供了include()方法用于判断子串是否存在。ES6标准随后在数组原型中引入了include()方法，用于判断数组是否包含特定元素，具体用法如下。

[1,2,3].incudes(2) // true

直接调用数组实例的该方法，传入目标元素作为参数，将返回布尔值结果。更重要的是，它能有效解决indexOf()方法在处理特殊值时的缺陷：

[NaN].includes(NaN) // true

如上示例所示，incudes()能够正确识别并处理NaN的查找需求。虽然incudes()方法主要用于简单的包含性判断，查找条件相对单一，但如果需要自定义查找逻辑（如范围筛选），则可以使用以下一对方法：find()与findIndex()。接下来我们将查看它们的具体使用方式。

find()与findIndex()方法

find()与findIndex()方法可用于匹配数组中符合特定条件的元素。

find()方法

find()方法支持三个参数，分别为value（当前遍历的值）、index（当前索引）以及arr（原数组引用），其返回值为第一个满足回调函数条件的元素值。

let arr = [1,2,10,6,19,20]
arr.find((value,index,arr) => {
    return value > 10
}) // 19

如上示例，我以元素值大于10作为筛选条件，最终返回了第一个符合该条件的值：19。若仅需获取符合条件的第一个元素，可直接使用find()；而若需获取该元素的索引位置，则应使用findIndex()。

findIndex()方法

findIndex()方法与find类似，同样支持三个参数，但返回值不同：它返回的是第一个满足条件元素的索引。

let arr = [1,2,10,6,19]
arr.find((value,index,arr) => {
    return value > 10
}) // 4

示例代码与find()相同，但此处返回的是值19对应的索引位置。

针对NaN值的处理

find()与findIndex()方法在处理NaN值时不会像indexOf那样产生误判。我们可以利用Object.is()函数作为筛选条件，从而准确判断NaN值，具体示例如下。

[NaN].find((value)=> {
    return Object.is(NaN,value)
}) // NaN

如上例所示，findIndex()方法的处理逻辑同理。

最后

关于判断元素在数组中是否存在的四种主要方法介绍至此。希望这篇关于JavaScript判断数组成员的几种方法的文章能对各位掘友有所帮助，更多相关JS判断数组成员的内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！