介绍

在 JavaScript 中，您经常会处理存储在数组中的数据。一个常见的任务是搜索数组以查找它是否包含满足特定搜索条件的值（或多个值）。根据手头的任务，您可能对用于确认的布尔值、数组中值位置的索引或包含所有搜索结果的单独数组感兴趣。

在 ECMAScript 6 之前，您可能会使用for循环来遍历数组中的所有项目并对每个项目执行操作。现在有几个内置的实用方法可以解决一些在数组中搜索值的常见任务。

在本文中，您将了解Array.includes()，Array.indexOf，Array.find()，和Array.filter。

先决条件

如果你想跟随这篇文章，你需要：

• 熟悉JavaScript 数组。

使用 includes()

如果值存在于数组中，则该includes()方法返回 atrue或 a 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"– 4– 将被返回。

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。每个都可以为您的用例需求提供解决方案。

• 你只需要知道它是否存在吗？
  • 使用includes().
• 您需要获取元素本身吗？
  • 使用find()单个项目或filter()多个项目。
• 你需要找到元素的索引吗？
  • 使用indexOf()搜索原始或findIndex()具有功能进行搜索。

使用迭代方法、访问器方法和修改器方法继续您的 JavaScript 学习。