JavaScript 中搜索数组的四种方法

我们经常需要在JavaScript中处理存储在数组中的数据。有个常见的任务就是搜索数组以查找它是否包含满足特定搜索条件的单个（或多个）值。根据任务目标，你可能需要关注用于确认的布尔值、数组中值的位置索引或包含所有搜索结果的单独数组。

在ECMAScript 6之前，你或许常用for循环来遍历数组中的所有项目并对项目执行操作。而现在我们可以通过内置的实用方法来完成在数组中搜索值的常见任务。

在本文中，我们将学习Array.includes()、Array.indexOf、Array.find()和Array.filter这些方法。

准备
在阅读本文之前，你需要：

熟悉JavaScript数组。
使用includes()
根据数组中是否存在值，includes()方法将返回true或false。

基本语法：

arr.includes(valueToFind[, fromIndex]);
第一个参数valueToFind是数组中要匹配的值。第二个参数fromIndex是可选的，用于设置开始比较的索引。因为默认值为0，意味着默认搜索整个数组。

请看alligator facts的示例数组：

const alligatorFacts = [“thick scales”, 80, “4 foot tail”, “rounded snout”, 80];
然后使用includes()检查数组中是否存在字符串"thick scales"：

alligatorFacts.includes(“thick scales”);
代码将返回true，因为字符串存在于数组中。

如果你添加fromIndex参数以便在"thick scales"之后进行比较，则将返回false：

alligatorFacts.includes(“thick scales”, 1);
此外，还有一些需要注意的重要事项。这里的.includes()方法使用严格比较。例如：

alligatorFacts.includes(80);
上述代码将返回true，因为数值80在数组中。

alligatorFacts.includes(‘80’);
上述代码将返回false，因为字符串值’80’不在数组中。

includes()对于只需要知道值是否存在于数组中的用例很有帮助。

使用indexOf()
indexOf()方法返回数组中值的第一个索引。如果没有匹配项，则返回-1。

基本语法如下：

arr.indexOf(searchElement[, fromIndex])
回顾 alligator facts的示例数组：

const alligatorFacts = [“thick scales”, 80, “4 foot tail”, “rounded snout”, 80];
使用indexOf()返回字符串"rounded snout"的第一个索引：

alligatorFacts.indexOf(“rounded snout”);
返回字符串"rounded snout"的索引——3。

alligatorFacts.indexOf(“soft and fluffy”);
上述代码返回-1，因为该字符串在数组中不存在。

alligatorFacts.indexOf(80)
以上代码返回1。

alligatorFacts.indexOf(80, 2);
返回-1，因为该值在索引2之后不存在。

注意：如果你查找的不是第一个结果，那么或许可以使用lastIndexOf()。lastIndexOf()方法与indexOf类似，但将从数组的最后一个索引开始查找第一个匹配项并往回工作。

indexOf对于需要搜索结果的单个索引的用例很有帮助。

使用find()
find()方法返回数组中与函数条件匹配的第一个值。如果没有匹配项，则返回undefined。

基本语法如下：

arr.find(callback(element[, index[, array]])[, thisArg])
回顾alligator facts的示例数组：

const alligatorFacts = [“thick scales”, 80, “4 foot tail”, “rounded snout”];
然后使用find()返回长度小于13个字符的第一个值：

alligatorFacts.find(el => el.length < 13);
此示例仅使用callback参数。

80是一个数值。"rounded snout"的长度为13个字符。“thick scales"有12个字符，而"4 foot tail"有11个字符——这两者都满足函数条件。但是，find()只会返回第一个值，即返回"thick scales”。

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

alligatorFacts.find((el, idx) => typeof el === “string” && idx === 2);
“thick scales”、“4 foot tail"和"rounded snout"都满足第一个条件（typeof el === ‘string’）。如果这是唯一的条件，则返回第一个，即"thick scales”。但因为有第二个条件（idx === 2），所以最后代码返回"4 foot tail"。

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

find()对于需要单个搜索结果值的用例很有帮助。

使用filter()
filter()方法返回新数组，新数组包含所有与函数条件匹配的值。如果没有匹配项，则返回空数组。

基本语法如下：

let newArray = arr.filter(callback(currentValue[, index[, array]]) {
// return element for newArray, if true
}[, thisArg]);
还是alligator facts的示例数组：

const alligatorFacts = [“thick scales”, 80, “4 foot tail”, “rounded snout”, 80];
然后使用filter()返回所有等于80的值：

alligatorFacts.filter(el => el === 80);
数组中的两个值80都满足条件。因此返回新数组：[80, 80]。

filter()对于需要多个搜索结果值的用例很有帮助。

总结
本文重点介绍了Array.includes()、Array.indexOf、Array.find()和Array.filter。每个都可以为用例需求提供解决方案。

只需要知道值是否存在？这时可以使用includes()。
需要获取元素本身？可以对单个项目使用find()或对多个项目使用filter()。
需要查找元素的索引？应该使用indexOf()搜索原语或使用findIndex()搜索函数。