当前位置: 首页 > 科技观察

Javascript中查找数组中指定项的七种方法

时间:2023-03-12 07:01:13 科技观察

Javascript中查询数组是否包含某个元素的方法有很多。当然你可以使用for循环或Array.indesOf()方法。现在,ES6增加了一些更有用的方法来在数组中搜索我们想要的结果。indexof()方法确定一个元素是否包含在数组中的最快和最简单的方法是使用array.indexof()。此方法检查数组是否包含指定元素,返回其索引,如果不包含,返回-1。array1:(5)['apple','plum','chestnut','persimmon','pear']Testfile.html:13constapple=array1.indexOf("Apple")Testfile.html:14Result:0测试file.html:15----------------------------测试file.html:18array1:(5)['Apple','Plum','板栗','柿子','梨']testfile.html:19constlizi=array1.indexOf("plum")testfile.html:20结果1testfile.html:21----------------------------默认情况下,indexof从数组的第一个元素开始搜索,到最后一个元素结束。可以传入第二个参数指定起始元素的索引(0开始)。array1:(5)['apple','plum','chestnut','persimmon','pear']testfile.html:25constlizi1=array1.indexOf("plum",1)测试文件.html:26结果1testfile.html:27----------------------------testfile.html:30array1:(5)['Apple','李子','栗子','柿子','梨子']testfile.html:31constlizi2=array1.indexOf("plum",2)testfile.html:32result-1testfile.html:33--------------------------testfile.html:36array1:(5)['apple','plum','chestnut','柿子','梨子']testfile.html:38constshizi=array1.indexOf("persimmon",2)testfile.html:39result:3testfile.html:40---------------------------需要注意的是indexof返回的是第一个查找到的结果,即数组中出现的第一个元素的索引。lastIndexOf()方法Javascript也提供了一个lastIndexOf()方法,顾名思义,它从数组的最后一个元素开始查找,到第一个元素停止。返回找到的第一个元素的索引,即数组中最后一个元素的索引。同样,也可以传入第二个参数,跳过一些搜索到的元素。array1:(5)['apple','plum','chestnut','persimmon','pear']testfile.html:44constshizi1=array1.lastIndexOf("persimmon")testfile.html:45结果:3测试文件.html:46----------------------------测试文件.html:49array1:(5)['Apple','李子','栗子','柿子','梨子']测试文件.html:51constlianpen=array1.lastIndexOf("洗脸盆")测试文件.html:52结果:-1测试文件.html:53---------------------------testfile.html:55array1:(5)['apple','plum','chestnut','persimmon','pear']testfile.html:57constshizi2=array1.lastIndexOf("persimmon",2)testfile.html:58result:-1所有浏览器,包括IE9及以上,indexOf()和lastIndexOf()都是大小写-敏感的。includes()方法includes方法是ES6的一部分,可用于确定数组是否包含元素。如果包含则返回true,如果不包含则返回false。比较好的方法是检查元素是否存在,结果是boolean类型。array1(5)['apple','plum','chestnut','persimmon','pear']testfile.html:63constshizi3=array1.includes("persimmon")testfile.html:64结果:truedefault情况下,includes()搜索整个数组,你仍然可以传入第二个参数来指定从哪里开始搜索。array1(5)['apple','plum','chestnut','persimmon','pear']testfile.html:69constlizi3=array1.includes("plum",1)testfile.html:70结果:truetestfile.html:71----------------------------testfile.html:73array1(5)['Apple','李子','栗子','柿子','梨子']testfile.html:75constlizi4=array1.includes("plum",2)testfile.html:76result:falsetestfile.html:77---------------------------includes也适用于数组中包含的其他基本类型的元素。array2(8)[1,2,empty,'1','2',null,true,undefined]testfile.html:82result=array2.includes(null)testfile.html:83result:true测试文件。html:85result1=array2.includes(true)testfile.html:86result:truetestfile.html:88result2=array2.includes(1)testfile.html:89result:truetestfile.html:91result3=array2.includes(undefined)testfile.html:92结果:truetestfile.html:93----------------------------包括和indexOf对NaN有不同的反应。array3(8)[1,2,empty,'1',NaN,null,true,undefined]测试文件.html:98result4=array3.includes(NaN)测试文件.html:99Result:trueTestfile.html:101result5=array3.indexOf(NaN)测试文件.html:102结果:-1测试文件.html:103--------------------------includes()在IE中不受支持。find()方法与includes不同。find对数组中的每个元素执行一个条件,并返回满足条件的第一个元素本身。array1:(5)['apple','plum','chestnut','persimmon','pear']testfile.html:107result6=array1.find(item=>item==="persimmon")测试文件.html:108Result:persimmontestfile.html:109----------------------------上例中使用了箭头函数,这是ES6中的一个概念。如果没有元素满足条件函数,则返回undefined。array1:(5)['apple','plum','chestnut','persimmon','pear']testfile.html:113result7=array1.find(item=>item==="washbasin")测试文件.html:114Result:undefined你也可以传入第二个参数作为当前元素的索引,如果你想比较索引特别有用。array1:(5)['apple','plum','chestnut','persimmon','pear']testfile.html:119result8=array1.find((item,index)=>item==="柿子"&&index>2)testfile.html:120resultpersimmontestfile.html:122result9=array1.find((item,index)=>item==="plum"&&index>2)testfile.html:123resultundefinedfind的另一个优点是适用于数组中的元素是对象的情况。array4(4)[{…},{…},{…},{…}]0:{name:'小李'}1:{name:'小王'}2:{name:'小周'}3:{name:'小欧'}length:4[[Prototype]]:Array(0)测试文件.html:129result10=array4.find(item=>item.name==="小舟")测试文件。html:130结果{name:'小周'}find()不可用。IE浏览器的some()方法和find类似,只是返回的结果为true或false。array1:(5)['apple','plum','chestnut','persimmon','pear']testfile.html:135result11=array1.some(item=>item==="persimmon")测试文件.html:136结果truefind也可以用来搜索元素为object的数组。array4(4)[{…},{…},{…},{…}]0:{name:'小李'}1:{name:'小王'}2:{name:'小周'}3:{name:'小欧'}length:4[[Prototype]]:Array(0)testfile.html:141result12=array4.some(item=>item.name==="小舟")测试文件。html:142结果truesome()适用于IE9及更高版本,以及其他现代浏览器。every()方法every()方法要求数组中的每个元素都满足一个条件。array5(5)[3,4,5,6,7]testfile.html:148result13=array5.every(item=>item>3)testfile.html:149resultfalsetestfile.html:151result14=array5.every(item=>item>2)testfile.html:152resulttrueevery方法可以应用于现代浏览器和IE9及以上版本。区分大小写的搜索indexOf()和includes()是区分大小写的,也就是说,你必须指定相同的字符来搜索数组。array6(3)['Kate','Tom','Jerry']testfile.html:158result14=array6.indexOf('tom')testfile.html:159result-1testfile.html:161result15=array6。includes("tom")testfile.html:162resultfalse实现不区分大小写搜索的一种方法是使用map方法将每个元素更改为小写。array6(3)['Kate','Tom','Jerry']测试文件.html:167result16=array6.map(item=>item.toLowerCase()).indexOf('tom')测试文件.html:168结果1testfile.html:170result17=array6.map(item=>item.toLowerCase()).includes('tom')testfile.html:171resulttrue另一种方法是用一些方法,改成小写和比较是同时完成。array6(3)['Kate','Tom','Jerry']testfile.html:177result17=array6.some(item=>item.toLowerCase()==='tom')testfile.html:178结果truefilter()方法获取数组中满足特定条件的所有元素并返回一个新数组。array5(5)[3,4,5,6,7]测试文件.html:183result19=array5.filter(item=>item>3)测试文件.html:184结果(4)[4,5,6,7]如果没有满足条件的元素,filter()返回一个空数组。array5(5)[3,4,5,6,7]testfile.html:189result19=array5.filter(item=>item>9)testfile.html:190result[]总结在这篇文章中,我们介绍了7个判断一个元素是否存在于数组中的方法。这时候很多人可能会问,为什么会有这么多方法呢?为什么不用一种方法实现所有功能呢?简单的答案可能是:这些方法旨在实现不同的目的。如果您想知道元素的位置索引,请使用indexOf()。如果您想知道数组中最后一个元素的索引,请使用lastIndexOf()。您只想知道数组是否包含一个元素。使用includes()获取符合条件的元素。使用find()如果数组中的元素是object类型,使用some()判断元素是否存在,判断数组中的每个元素是否满足一定条件,使用every()方法获取所有元素在满足一定条件的数组中新建数组,使用filter方法