JavaScript的搜索数组的4种方法是什么？

在JavaScript中，有很多有用的方法可以在数组中查找项目。您始终可以使用基本的for循环，但是使用ES6+，有很多方法可以遍历数组并轻松找到所需的内容。那么JavaScript的搜索数组的4种方法是什么？对于每种将要介绍的方法，必须了解它们都是Array.prototype的内置方法，这一点很重要。这意味着您只需…

在JavaScript中，有很多有用的方法可以在数组中查找项目。您始终可以使用基本的for循环，但是使用ES6+，有很多方法可以遍历数组并轻松找到所需的内容。那么JavaScript的搜索数组的4种方法是什么？

对于每种将要介绍的方法，必须了解它们都是Array.prototype的内置方法，这一点很重要。这意味着您只需要将它们链接到任何带有点符号的数组上即可。这也意味着这些方法不适用于对象或数组以外的任何对象（尽管与字符串重叠）。

我们将研究以下Array方法：

Array.includes

Array.find

Array.indexOf

Array.filter

includes

constalligator=[“thickscales”,80,”4foottail”,”roundedsnout”];

alligator.includes(“thickscales&#8221😉;//returnstrue

.includes（）方法返回一个布尔值，非常适合告诉您数组中是否存在元素。它给出了简单的正确或错误答案。这是基本语法：

arr.includes(valueToFind,[fromIndex]);

就像您在我们的示例中看到的那样，我们只有一个参数-valueToFind。这是数组中要匹配的值。可选的fromIndex是一个数字，指示要从其开始查找的索引（默认值为0，因此将搜索整个数组）。因此，由于在我们的示例中，“thickscales”项位于0索引处，因此以下内容为假：alligator.includes（’thickscales’，1）;因为它开始从索引1开始搜索。

现在，有几件事要注意。此.includes（）方法使用严格的比较。这意味着，在上面的示例中，以下内容将返回false：alligator.includes（’80’）;。这是因为尽管80==’80’是正确的，而80===’80’是错误的-不同类型不会通过严格比较.

find

.find（）与include（）方法有何不同？如果在我们的示例中，仅将文本“includes”更改为“find”，则会出现此错误：

UncaughtTypeError:thickscalesisnotafunction

那是因为find方法需要传递一个函数。那是因为find方法将不会像“includes（）”那样只使用简单的比较运算符。相反，它将把每个元素传递到您的函数中，并查看它是否返回true或false。因此，尽管这可行：alligator.find（（）=>’thickscales’）;，您可能希望将自己的比较运算符放入函数中，以使其返回任何相关内容。

constalligator=[“thickscales”,80,”4foottail”,”roundedsnout”];

alligator.find(el=>el.length<12);//returns’4foottail’

在我们的find方法中，这个简单的函数查看数组的每个元素，并为其分配别名“el”，并在找到第一个为真的元素时停止。在我们的情况下，true的length属性小于12（数字没有length属性）。当然，您可以根据需要使此功能复杂，使您的真实状况满足您的需求。

还要注意，这并没有返回true。find方法不返回布尔值，而是返回第一个匹配的元素。如果没有匹配的元素（如不存在符合您的函数中定义的条件的元素），则它将返回未定义。还要注意，它返回第一个实例，因此，如果数组中有多个满足条件的元素，它将仅捕获第一个实例。在我们的示例中，如果在“4英尺高”之后还有另一个长度小于12的字符串，则不会改变我们的结果。

在我们的示例中，我们仅使用带有一个参数的回调。您还可以添加参数以引用当前元素的索引。另一个参数可以是整个数组本身，但是我发现它很少使用。这是使用索引的示例：

alligator.find((el,idx)=>typeofel===”string”&&idx===2);//returns’4foottall’

我们知道在数组中，有3个满足第一个条件的元素（typeofel===’字符串’）。如果这是我们唯一的条件，它将返回第一个“thickscales”。但是区别在于，只有一个指数为2，即“4英尺高”。

说到索引，类似的数组方法是.findIndex（）。此方法还接收一个函数，但是您可以猜测，它返回匹配元素的索引，而不是元素本身。

indexOf

constalligator=[“thickscales”,80,”4foottail”,”roundedsnout”];

alligator.indexOf(“roundedsnout&#8221😉;//returns3

与.includes（）方法类似，.indexOf（）使用严格的比较，而不是我们在.find（）方法中看到的函数。但是，与include（）不同，它返回元素的索引，而不是布尔值。您还可以指示要从数组中的哪个索引开始搜索。

我发现indexOf（）非常有用。快速简便，可以告诉您元素在数组中的位置，并且可以告诉您元素是否存在。它如何告诉您该元素是否存在？基本上，如果元素返回正数，我们就可以知道它存在；如果返回-1，我们就知道该元素不存在。

alligator.indexOf(“softandfluffy&#8221😉;//returns-1

alligator.indexOf(80);//returns1

alligator.indexOf(80,2);//returns-1

如您所见，尽管我们可以使用find（）或findIndex（）方法为我们提供相同的信息，但是编写起来却要少得多。我们不必编写用于比较的函数，因为它已经在indexOf方法中。

现在，和其他元素一样，indexOf（）也返回它找到的第一个匹配元素的索引。JavaScript为我们提供了另一种数组方法.lastIndexOf（）。如您所料，这与indexOf（）的作用相同，但从数组的最后一个索引开始并向后工作。您还可以指定第二个参数，但是请记住，索引不变，只是因为您使用的是其他方法。

constalligator=[“thickscales”,80,”4foottail”,”roundedsnout”,80];

alligator.indexOf(80);//returns1

alligator.lastIndexOf(80);//returns4

alligator.indexOf(80,2);//returns4

alligator.lastIndexOf(80,4);//returns4

alligator.lastIndexOf(80,3);//returns1

Bonus:filter

constalligator=[“thickscales”,80,”4foottail”,”roundedsnout”,80];

alligator.filter(el=>el===80);//returns[80,80]

filter（）方法类似于find（）方法，因为它需要传递一个函数以及要返回的内容的条件。主要区别在于，即使只有一个匹配元素，filter（）始终返回一个数组。但是它将返回所有匹配的元素，而find（）仅返回第一个匹配的元素。

filter的重要之处在于，它返回符合条件的所有元素。可能只有我一个人，但我可能会感到困惑，以为“这些是我要过滤的元素”，实际上，当您指出要过滤的元素时。

结论

查找内容时，我发现最容易使用的方法是find（）方法，但是如您所见，它实际上取决于您的情况。

您是否只需要知道它是否存在？使用.includes（）。

您是否需要获取元素本身？对多个项目使用.find（）或.filter（）。

您是否需要查找元素的索引？使用.indexOf（）或findIndex（）进行更复杂的搜索。

此处示例中的数组非常简单。您可能会发现自己拥有一系列对象。以下是一些非常基本的示例，可在嵌套对象的jungle导航：

constjungle=[

{name:”frog”,threat:0},

{name:”monkey”,threat:5},

{name:”gorilla”,threat:8},

{name:”lion”,threat:10}

];

//breaktheobjectdowninordertouse.includes()or.indexOf()

constnames=jungle.map(el=>el.name);//returns[‘frog’,’monkey’,’gorilla’,’lion’]

console.log(names.includes(“gorilla&#8221😉);//returnstrue

console.log(names.indexOf(“lion&#8221😉);//returns3-whichcorrespondscorrectlyassumingnosortingwasdone

//methodswecandoonthearrayofobjects

console.log(jungle.find(el=>el.threat==5));//returnsobject-{name:”monkey”,threat:5}

console.log(jungle.filter(el=>el.threat>5));//returnsarray-[{name:”gorilla”,threat:8},

总而言之，这些都是熟悉的好方法。