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

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

4
2020-02-17 11:06:09

在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");//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");//returns3

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

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

alligator.indexOf("softandfluffy");//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"));//returnstrue

console.log(names.indexOf("lion"));//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},

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

喜欢这个文章就点个赞分享给好友吧~

END
相关标签

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持