JavaScript 数组搜索的四种常用方法详解

前言

在前端开发中，经常需要通过 JavaScript 处理数组数据，这通常涉及检查数组是否包含满足特定条件的单个或多个值。实现这一目标时，我们需要关注返回的布尔值、元素在数组中的索引位置，或者包含所有匹配结果的独立数组。

在 ECMAScript 6 标准发布之前，开发者最常用的方式是利用 for 循环遍历数组中的所有项目并执行相应操作。如今，借助 JavaScript 内置的方法，我们可以更便捷地完成数组搜索的常见任务。

本文将重点介绍 Array.includes()、Array.indexOf()、Array.find() 以及 Array.filter 这四种方法的具体用法。

使用 includes()

includes() 方法用于判断数组中是否存在指定值，若存在则返回 true，否则返回 false。

基本语法如下：

该方法的第一个参数 valueToFind 表示要在数组中匹配的目标值；第二个参数 fromIndex 为可选参数，用于指定开始比较的起始索引。由于默认值为 0，这意味着如果不指定该参数，搜索将覆盖整个数组。

参考以下 alligator facts 示例数组：

接下来，我们使用 includes() 方法检查数组中是否存在字符串“thick scales”。

代码执行结果为 true，因为该字符串确实存在于数组中。

如果添加 fromIndex 参数，指定从“thick scales”之后的位置开始比较，则结果将返回 false。

此外，使用 includes() 时需注意以下几点：该方法采用严格相等（===）进行比较。例如：

上述代码返回 true，因为数值 80 存在于数组中。

而上述代码将返回 false，因为字符串值 '80' 并不在数组中（类型不同）。

includes() 方法适用于仅需确认值是否存在于数组中的场景。

使用 indexOf()

indexOf() 方法返回数组中匹配值的第一个索引位置；若未找到匹配项，则返回 -1。

其基本语法如下：

回顾之前的 alligator facts 示例数组：

使用 indexOf() 获取字符串“rounded snout”的第一个索引：

结果返回字符串“rounded snout”的索引值 —3。

上述代码返回 -1，因为该字符串不在数组中。

上述代码返回 1。

结果返回 4，因为在索引 2 之后找到了该元素，它是数组中的第四个元素。

注意：如果你查找的不是第一个匹配结果，可以考虑使用 lastIndexOf()。该方法与 indexOf() 类似，但它从数组的最后一个索引开始向前查找第一个匹配项。

indexOf 方法适用于需要获取搜索结果索引位置的场景。

使用 find()

find() 方法返回数组中满足回调函数条件的第一个值；若没有匹配项，则返回 undefined。

基本语法如下：

回顾 alligator facts 示例数组：

接着使用 find() 返回长度小于 13 个字符的第一个值：

此示例仅使用了 callback 参数。

数值 80 是一个数字。“rounded snout”的长度为 13 个字符，“thick scales”有 12 个字符，而“4 foot tail”有 11 个字符——后两者均满足函数条件。然而，find() 仅返回第一个匹配的值，即“thick scales”。

以下是使用可选 index 参数的示例：

“thick scales”、“4 foot tail”和“rounded snout”都满足第一个条件（typeof el === 'string'）。如果这是唯一条件，将返回第一个值“thick scales”。但由于存在第二个条件（idx === 2），最终代码返回“4 foot tail”。

注意：如果你需要查找的是索引而非值本身，可能会倾向于使用 findIndex()。findIndex() 方法同样接收函数作为参数，但它返回的是匹配元素的索引，而不是元素本身。

find() 方法适用于仅需获取单个搜索结果值的场景。

使用 filter()

filter() 方法返回一个新数组，新数组包含所有满足回调函数条件的值。若没有匹配项，则返回空数组。

基本语法如下：

依然使用 alligator facts 示例数组：

接着使用 filter() 返回所有等于 80 的值：

数组中的两个值 80 均满足条件。因此，返回的新数组为：[80, 80]。

filter() 方法适用于需要获取多个搜索结果值的场景。

总结

数组中的两个

本文重点介绍了 Array.includes()、Array.indexOf()、Array.find() 和 Array.filter。每种方法都能针对特定的用例需求提供解决方案。

如果只需知道值是否存在，可以使用 includes()。

如果需要获取元素本身，可以对单个项目使用 find()，或对多个项目使用 filter()。

如果需要查找元素的索引，应使用 indexOf() 搜索原始值，或使用 findIndex() 搜索函数匹配项。

到此这篇关于javascript中搜索数组的四种方法的文章就介绍到这了,更多相关js搜索数组方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！