javascript中搜索数组的四种方法示例详解

时间:2022-12-13 CRMEB 人气:0

前言

前端经常要通过 javaScript 来处理数组中的数据，其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值，这就需要我们关于用于确认的布尔值、数组中值得位置索引或包含所有搜索结果的单独数组等。

在 ECMAScript6 之前，最常用的方法就是通过 for 循环来遍历数组中的所有项目并对项目执行操作。现在我们可以通过内置的使用方法来完成在数组中搜索值的常见任务。

本文将介绍 Array.includes()、Array.indexOf()、Array.fiind() 和 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(),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() 对于需要单个搜索结果值的用例很有帮助。