在 JavaScript 中搜索数组的四种方法

介绍

在 JavaScript 中,您通常会使用存储在 Arrays 中的数据进行工作. 一个常见的任务是搜索数组,以查找是否包含符合某些搜索标准的值(或值)。

在 ECMAScript 6 之前,你可能会使用一个为循环来迭代数组中的所有项目,并在每个项目上执行操作,现在有几种内置的实用程序方法可以解决数组中搜索值的一些常见任务。

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

前提条件

如果您想跟随这篇文章,您将需要:

熟悉的JavaScript数组(https://andsky.com/tech/tutorials/understanding-arrays-in-javascript)。

使用`包括( )`

包含() 方法返回一个真或一个假,如果一个值存在于一个数组或不存在。

这是基本的语法:

1arr.includes(valueToFind[, fromIndex]);

第一个参数, valueToFind,是数组中要匹配的值。第二个参数, fromIndex,是可选的,并设置了开始比较的索引。

以下是阿里加特尔事实的样本系列:

1const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

然后使用includes()来检查数组中是否存在厚度尺度字符串:

1alligatorFacts.includes("thick scales");

此代码将返回真,因为字符串存在于数组中。

如果你要添加一个‘fromIndex’参数,以便比较发生在‘厚度’之后,它会返回‘false’:

1alligatorFacts.includes("thick scales", 1);

此 .includes() 方法使用严格的比较。

1alligatorFacts.includes(80);

此代码将返回真,因为数值80位于数组中。

1alligatorFacts.includes('80');

此代码将返回false,因为字符串值80不在数组中。

'includes()' 对于只需要知道值是否存在于数组的使用案例是有用的。

使用「indexOf()」

indexOf() 方法返回数组中的值的第一个索引. 如果没有匹配,则该方法返回 -1。

这是基本的语法:

1arr.indexOf(searchElement[, fromIndex])

让我们再来看看阿里加特尔事实的样本阵列:

1const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

然后使用indexOf()返回字符串的第一个索引圆形 snout:

1alligatorFacts.indexOf("rounded snout");

将返回字符串的索引``圆形-3` -。

1alligatorFacts.indexOf("soft and fluffy");

此示例返回-1,因为此字符串不存在。

1alligatorFacts.indexOf(80)

此示例返回1。

1alligatorFacts.indexOf(80, 2);

此示例返回-1,因为该值不存在超过 2 的索引。

<$>[注] 注: 如果您不寻找第一个结果,您可能希望使用 lastIndexOf(). 这种方法类似于 indexOf,但会找到第一个匹配,从数组的最后一个索引开始并向后工作。

「indexOf」对于需要一个相关搜索结果的单个索引的用例是有用的。

使用`找到( )`

「Find()」方法返回一个函数条件相匹配的数组中的第一个值. 如果没有匹配,则该方法返回「未定义」。

这是基本的语法:

1arr.find(callback(element[, index[, array]])[, thisArg])

让我们再来看看阿里加特尔事实的样本阵列:

1const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout"];

然后使用find()返回第一个长度小于13字符的值:

1alligatorFacts.find(el => el.length < 13);

此示例仅使用回调参数。

「80」是一個數字值. 「rounded snout」是 13 個字符的長度. 「thick scales」是 12 個字符的長度,而「4 foot tail」是 11 個字符的長度,這兩個字符都滿足了函數的條件。

以下是使用可选索引参数的示例:

1alligatorFacts.find((el, idx) => typeof el === "string" && idx === 2);

「4英尺尾巴」、「4英尺尾巴」、「4英尺尾巴」和「4英尺尾巴」都符合第一個條件,如果這是唯一的條件,就會返回第一個條件「4英尺尾巴」;但第二個條件(「idx ===2」)會導致這個代碼返回「4英尺高」。

<$>[注] 注: 如果您正在搜索索引而不是值,您可能希望使用 findIndex(). 此方法也收到函数,但返回相匹配元素的索引而不是元素本身。

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

使用`过滤器()`

filter() 方法返回一个与函数条件相匹配的数组中的所有值的新数组. 如果没有匹配,则该方法返回一个空数组。

这是基本的语法:

1let newArray = arr.filter(callback(currentValue[, index[, array]]) {
2  // return element for newArray, if true
3}[, thisArg]);

让我们再来看看阿里加特尔事实的样本阵列:

1const alligatorFacts = ["thick scales", 80, "4 foot tail", "rounded snout", 80];

然后使用filter()返回所有等于80的值:

1alligatorFacts.filter(el => el === 80);

数组中的两个80值符合此条件,此代码将返回一个新的数组:[80] 80。

filter() 对于想要多个搜索结果值的使用案例非常有用。

结论

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

你只需要知道它是否存在吗?

使用 includes().

你需要获得元素本身吗?

使用 find() 用于单个元素或 filter() 用于多个元素

您需要找到元素的索引吗?

使用 indexOf() 搜索原始或 findIndex() 搜索函数

继续你的JavaScript学习用 iteration methods, accessor methods和 mutator methods。

在 JavaScript 中搜索数组的四种方法

介绍

前提条件

使用包括( )

使用「indexOf()」

使用找到( )

使用过滤器()

结论

使用`包括( )`

使用`找到( )`

使用`过滤器()`