Javascript中七种方法在Array中查找指定项
在Javascript中有很多方法可以实现查询在一个array中是中种y中指定否包含一个元素。当然可以使用for循环或者Array.indesOf()方法。查找现在,中种y中指定ES6添加了一些更有用的查找方法在array中搜索我们想要的结果。
indexof()方法
确定array中是中种y中指定否包含某个元素的最快的,最简单方法就是查找使用array.indexof()。这个方法检查array是中种y中指定否包含某个指定的元素,返回它的查找index,如果不包含,中种y中指定返回-1。查找
array1: (5) [苹果,中种y中指定 李子, 栗子, 柿子, 梨] 测试文件.html:13 const apple = array1.indexOf("苹果") 测试文件.html:14 结果: 0 测试文件.html:15 ---------------------------- 测试文件.html:18 array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:19 const lizi = array1.indexOf("李子") 测试文件.html:20 结果 1 测试文件.html:21 ----------------------------默认情况下,indexof从array的查找第一个元素开始搜索,在最后一个元素结束。中种y中指定你可以传入第二个参数,查找指定开始元素的中种y中指定index(0开始)。
array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:25 const lizi1 = array1.indexOf("李子",1) 测试文件.html:26 结果 1 测试文件.html:27 ---------------------------- 测试文件.html:30 array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:31 const lizi2 = array1.indexOf("李子",2) 测试文件.html:32 结果 -1 测试文件.html:33 ---------------------------- 测试文件.html:36 array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:38 const shizi = array1.indexOf("柿子",2) 测试文件.html:39 结果: 3 测试文件.html:40 ----------------------------需要注意的是,indexof返回第一个搜索到的结果,也就是array中第一个出现的云服务器元素的index。
lastIndexOf()方法
Javascript还提供了一个lastIndexOf()方法,顾名思义,它从array的最后一个元素开始搜索,在第一个元素停止。返回第一个搜索到的元素的index,也就是array中最后一次出现的元素的index。同样,也可以传入第二个参数,跳过一些搜索的元素。
array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:44 const shizi1 = array1.lastIndexOf("柿子") 测试文件.html:45 结果: 3 测试文件.html:46 ---------------------------- 测试文件.html:49 array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:51 const lianpen = array1.lastIndexOf("脸盆") 测试文件.html:52 结果: -1 测试文件.html:53 ---------------------------- 测试文件.html:55 array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:57 const shizi2 = array1.lastIndexOf("柿子",2) 测试文件.html:58 结果: -1在所有的浏览器中,包括IE9及以上的版本,indexOf()和lastIndexOf()都是区分大小写的。
includes()方法
inclludes方法是ES6的一部分,可以用来确定array是否包含某个元素。如果包含,返回true, 不包含,返回false。服务器租用是一个比较好的方法检查某个元素是否存在,结果为一个boolean类型。
array1 (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:63 const shizi3 = array1.includes("柿子") 测试文件.html:64 结果: true默认情况下,includes()搜索整个array, 你仍然可以传入第二个参数,指定开始搜索的位置。
array1 (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:69 const lizi3 = array1.includes("李子",1) 测试文件.html:70 结果: true 测试文件.html:71 ---------------------------- 测试文件.html:73 array1 (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:75 const lizi4 = array1.includes("李子",2) 测试文件.html:76 结果: false 测试文件.html:77 ----------------------------includes也适用于与array中包含其他基本类型的元素。
array2 (8) [1, 2, empty, 1, 2, null, true, undefined] 测试文件.html:82 result = array2.includes(null) 测试文件.html:83 结果: true 测试文件.html:85 result1 = array2.includes(true) 测试文件.html:86 结果: true 测试文件.html:88 result2 = array2.includes(1) 测试文件.html:89 结果: true 测试文件.html:91 result3 = array2.includes(undefined) 测试文件.html:92 结果: true 测试文件.html:93 ----------------------------includes和indexOf对于NaN有不同的反应。
array3 (8) [1, 2, empty, 1, NaN, null, true, undefined] 测试文件.html:98 result4 = array3.includes(NaN) 测试文件.html:99 结果: true 测试文件.html:101 result5 = array3.indexOf(NaN) 测试文件.html:102 结果: -1 测试文件.html:103 ----------------------------includes()在IE中不支持。
find()方法
跟includes不同,find在array中每一个元素执行一个条件,返回第一个符合条件的元素本身。
array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:107 result6 = array1.find(item=>item==="柿子") 测试文件.html:108 结果: 柿子 测试文件.html:109 ----------------------------上例中使用了arrow function,它是ES6中的概念。
如果没有元素能够满足条件函数,则返回undefined。
array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:113 result7 = array1.find(item=>item==="脸盆") 测试文件.html:114 结果: undefined你也可以传入第二个参数,作为当前元素的index,如果你想比对index时尤其有用。
array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:119 result8 = array1.find((item,index)=>item==="柿子" && index>2) 测试文件.html:120 结果 柿子 测试文件.html:122 result9 = array1.find((item,index)=>item==="李子" && index>2) 测试文件.html:123 结果 undefinedfind的另一个好处是,适用于array中元素是服务器托管object的时候。
array4 (4) [{ …}, { …}, { …}, { …}]0: { name: 小李}1: { name: 小王}2: { name: 小周}3: { name: 小欧}length: 4[[Prototype]]: Array(0) 测试文件.html:129 result10 = array4.find(item=>item.name==="小周") 测试文件.html:130 结果 { name: 小周}find()不可用与IE浏览器
some()方法
some方法跟find相似,不同的是返回的结果是true或者false。
array1: (5) [苹果, 李子, 栗子, 柿子, 梨] 测试文件.html:135 result11 = array1.some(item=>item==="柿子") 测试文件.html:136 结果 truefind也可用于元素为object的array的搜索。
array4 (4) [{ …}, { …}, { …}, { …}]0: { name: 小李}1: { name: 小王}2: { name: 小周}3: { name: 小欧}length: 4[[Prototype]]: Array(0) 测试文件.html:141 result12 = array4.some(item=>item.name==="小周") 测试文件.html:142 结果 truesome()可用于IE9及以上版本,以及其他现代浏览器。
every()方法
every()方法要求array中每一个元素都符合一个条件。
array5 (5) [3, 4, 5, 6, 7] 测试文件.html:148 result13 = array5.every(item=>item>3) 测试文件.html:149 结果 false 测试文件.html:151 result14 = array5.every(item=>item>2) 测试文件.html:152 结果 trueevery方法可以应用于现代浏览器及IE9及以上版本。
大小写的搜索
indexOf()和includes()都是区分大小写的,也就是说你必须要指定相同的字符才可搜索array。
array6 (3) [Kate, Tom, Jerry] 测试文件.html:158 result14 = array6.indexOf(tom) 测试文件.html:159 结果 -1 测试文件.html:161 result15 = array6.includes("tom") 测试文件.html:162 结果 false实现不区分大小写的搜索的一种方法是使用map方法把每一个元素都修改为小写。
array6 (3) [Kate, Tom, Jerry] 测试文件.html:167 result16 = array6.map(item=>item.toLowerCase()).indexOf(tom) 测试文件.html:168 结果 1 测试文件.html:170 result17 = array6.map(item=>item.toLowerCase()).includes(tom) 测试文件.html:171 结果 true另一个方法是使用some方法,一步中变小写和比较同时完成。
array6 (3) [Kate, Tom, Jerry] 测试文件.html:177 result17 = array6.some(item=>item.toLowerCase()===tom) 测试文件.html:178 结果 truefilter()方法
得到array中所有满足某个条件的元素,并返回一个新的array。
array5 (5) [3, 4, 5, 6, 7] 测试文件.html:183 result19 = array5.filter(item=>item>3) 测试文件.html:184 结果 (4) [4, 5, 6, 7]如果没有满足条件的元素,filter()返回一个空的array。
array5 (5) [3, 4, 5, 6, 7] 测试文件.html:189 result19 = array5.filter(item=>item>9) 测试文件.html:190 结果 []总结
本文中,我们介绍了7中在array中判断某个元素是否存在的方法。很多人在这时候都可能会问,为什么会有这么多方法呢? 为什么不用一种方法来实现所有的功能呢?
简单的答案可能就是:这些方法都设计来完成一个不同的目的。
想要知道元素的位置index,使用indexOf() 想要知道元素最后出现在array中的位置index,使用lastIndexOf() 只想知道array中是否包含某个元素,使用includes() 想得到符合条件的元素,使用find() 如果array中元素是object类型,用some()判断某个元素是否存在 判断array中每一个元素都符合某个条件,用every()方法 得到array中满足某个条件的所有元素的新array,使用filter方法