在Javascript中有很多方法可以实现查询在一个array中是否包含一个元素。当然可以使用for循环或者Array.indesOf()方法。现在,ES6添加了一些更有用的方法在array中搜索我们想要的结果。
确定array中是否包含某个元素的最快的,最简单方法就是使用array.indexof()。这个方法检查array是否包含某个指定的元素,返回它的index,如果不包含,返回-1.
array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
测试文件.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的第一个元素开始搜索,在最后一个元素结束。你可以传入第二个参数,指定开始元素的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。
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()都是区分大小写的。
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中不支持。
跟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 结果 undefined
find的另一个好处是,适用于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方法跟find相似,不同的是返回的结果是true或者false。
array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
测试文件.html:135 result11=array1.some(item=>item==="柿子")
测试文件.html:136 结果 true
find也可用于元素为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 结果 true
some()可用于IE9及以上版本,以及其他现代浏览器。
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 结果 true
every方法可以应用于现代浏览器及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 结果 true
得到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方法