在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，因此会搜索整个数组。
这是鳄鱼事实的示例数组：
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])
让我们重温一下鳄鱼事实的样本数组：
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()。 此方法类似于 indexOf，但将从数组的最后一个索引开始查找第一个匹配项并向后工作。
indexOf 对于需要相关搜索结果的单个索引的用例很有帮助。
使用 find()
find() 方法返回数组中与函数条件匹配的第一个值。 如果没有匹配，该方法返回 undefined。
这是基本语法：
arr.find(callback(element[, index[, array]])[, thisArg])
让我们重温一下鳄鱼事实的样本数组：
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 tall"。
注意： 如果你正在寻找索引而不是值，你可能希望使用findIndex()。 此方法也接收一个函数，但它返回匹配元素的索引而不是元素本身。
find() 对于需要单个搜索结果值的用例很有帮助。
使用 filter()
filter() 方法返回一个新数组，其中包含与函数条件匹配的数组中的所有值。 如果没有匹配，该方法返回一个空数组。
这是基本语法：
let newArray = arr.filter(callback(currentValue[, index[, array]]) {
// return element for newArray, if true
}[, thisArg]);
让我们重温一下鳄鱼事实的样本数组：
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。 每个都可以为您的用例需求提供解决方案。
- 你只需要知道它是否存在吗？ 使用包含（）。
- 您需要获取元素本身吗？ 对单个项目使用 find() 或对多个项目使用 filter()。
- 你需要找到元素的索引吗？ 使用 indexOf() 搜索原语或使用 findIndex() 搜索函数。
