Javascript中七种方法在Array中查找指定项

时间：2021-09-05 08:27:34

在Javascript中有很多方法可以实现查询在一个array中是否包含一个元素。当然可以使用for循环或者Array.indesOf()方法。现在，ES6添加了一些更有用的方法在array中搜索我们想要的结果。

Javascript中七种方法在Array中查找指定项

indexof()方法

确定array中是否包含某个元素的最快的，最简单方法就是使用array.indexof()。这个方法检查array是否包含某个指定的元素，返回它的index，如果不包含，返回-1。

  1. array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:13 const apple = array1.indexOf("苹果")
  3. 测试文件.html:14 结果： 0
  4. 测试文件.html:15 ----------------------------
  5. 测试文件.html:18 array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  6. 测试文件.html:19 const lizi = array1.indexOf("李子")
  7. 测试文件.html:20 结果 1
  8. 测试文件.html:21 ----------------------------

默认情况下，indexof从array的第一个元素开始搜索，在最后一个元素结束。你可以传入第二个参数，指定开始元素的index(0开始)。

  1. array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:25 const lizi1 = array1.indexOf("李子",1)
  3. 测试文件.html:26 结果 1
  4. 测试文件.html:27 ----------------------------
  5. 测试文件.html:30 array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  6. 测试文件.html:31 const lizi2 = array1.indexOf("李子",2)
  7. 测试文件.html:32 结果 -1
  8. 测试文件.html:33 ----------------------------
  9. 测试文件.html:36 array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  10. 测试文件.html:38 const shizi = array1.indexOf("柿子",2)
  11. 测试文件.html:39 结果: 3
  12. 测试文件.html:40 ----------------------------

需要注意的是，indexof返回第一个搜索到的结果，也就是array中第一个出现的元素的index。

lastIndexOf()方法

Javascript还提供了一个lastIndexOf()方法，顾名思义，它从array的最后一个元素开始搜索，在第一个元素停止。返回第一个搜索到的元素的index，也就是array中最后一次出现的元素的index。同样，也可以传入第二个参数，跳过一些搜索的元素。

  1. array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:44 const shizi1 = array1.lastIndexOf("柿子")
  3. 测试文件.html:45 结果: 3
  4. 测试文件.html:46 ----------------------------
  5. 测试文件.html:49 array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  6. 测试文件.html:51 const lianpen = array1.lastIndexOf("脸盆")
  7. 测试文件.html:52 结果: -1
  8. 测试文件.html:53 ----------------------------
  9. 测试文件.html:55 array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  10. 测试文件.html:57 const shizi2 = array1.lastIndexOf("柿子",2)
  11. 测试文件.html:58 结果: -1

在所有的浏览器中，包括IE9及以上的版本，indexOf()和lastIndexOf()都是区分大小写的。

includes()方法

inclludes方法是ES6的一部分，可以用来确定array是否包含某个元素。如果包含，返回true, 不包含，返回false。是一个比较好的方法检查某个元素是否存在，结果为一个boolean类型。

  1. array1 (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:63 const shizi3 = array1.includes("柿子")
  3. 测试文件.html:64 结果: true

默认情况下，includes()搜索整个array， 你仍然可以传入第二个参数，指定开始搜索的位置。

  1. array1 (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:69 const lizi3 = array1.includes("李子",1)
  3. 测试文件.html:70 结果: true
  4. 测试文件.html:71 ----------------------------
  5. 测试文件.html:73 array1 (5) ['苹果', '李子', '栗子', '柿子', '梨']
  6. 测试文件.html:75 const lizi4 = array1.includes("李子",2)
  7. 测试文件.html:76 结果: false
  8. 测试文件.html:77 ----------------------------

includes也适用于与array中包含其他基本类型的元素。

  1. array2 (8) [1, 2, empty, '1', '2', null, true, undefined]
  2. 测试文件.html:82 result = array2.includes(null)
  3. 测试文件.html:83 结果: true
  4. 测试文件.html:85 result1 = array2.includes(true)
  5. 测试文件.html:86 结果: true
  6. 测试文件.html:88 result2 = array2.includes(1)
  7. 测试文件.html:89 结果: true
  8. 测试文件.html:91 result3 = array2.includes(undefined)
  9. 测试文件.html:92 结果: true
  10. 测试文件.html:93 ----------------------------

includes和indexOf对于NaN有不同的反应。

  1. array3 (8) [1, 2, empty, '1', NaN, null, true, undefined]
  2. 测试文件.html:98 result4 = array3.includes(NaN)
  3. 测试文件.html:99 结果： true
  4. 测试文件.html:101 result5 = array3.indexOf(NaN)
  5. 测试文件.html:102 结果： -1
  6. 测试文件.html:103 ----------------------------

includes()在IE中不支持。

find()方法

跟includes不同，find在array中每一个元素执行一个条件，返回第一个符合条件的元素本身。

  1. array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:107 result6 = array1.find(item=>item==="柿子")
  3. 测试文件.html:108 结果： 柿子
  4. 测试文件.html:109 ----------------------------

上例中使用了arrow function，它是ES6中的概念。

如果没有元素能够满足条件函数，则返回undefined。

  1. array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:113 result7 = array1.find(item=>item==="脸盆")
  3. 测试文件.html:114 结果： undefined

你也可以传入第二个参数，作为当前元素的index，如果你想比对index时尤其有用。

  1. array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:119 result8 = array1.find((item,index)=>item==="柿子" && index>2)
  3. 测试文件.html:120 结果 柿子
  4. 测试文件.html:122 result9 = array1.find((item,index)=>item==="李子" && index>2)
  5. 测试文件.html:123 结果 undefined

find的另一个好处是，适用于array中元素是object的时候。

  1. array4 (4) [{…}, {…}, {…}, {…}]0: {name: '小李'}1: {name: '小王'}2: {name: '小周'}3: {name: '小欧'}length: 4[[Prototype]]: Array(0)
  2. 测试文件.html:129 result10 = array4.find(item=>item.name==="小周")
  3. 测试文件.html:130 结果 {name: '小周'}

find()不可用与IE浏览器

some()方法

some方法跟find相似，不同的是返回的结果是true或者false。

  1. array1: (5) ['苹果', '李子', '栗子', '柿子', '梨']
  2. 测试文件.html:135 result11 = array1.some(item=>item==="柿子")
  3. 测试文件.html:136 结果 true

find也可用于元素为object的array的搜索。

  1. array4 (4) [{…}, {…}, {…}, {…}]0: {name: '小李'}1: {name: '小王'}2: {name: '小周'}3: {name: '小欧'}length: 4[[Prototype]]: Array(0)
  2. 测试文件.html:141 result12 = array4.some(item=>item.name==="小周")
  3. 测试文件.html:142 结果 true

some()可用于IE9及以上版本，以及其他现代浏览器。

every()方法

every()方法要求array中每一个元素都符合一个条件。

  1. array5 (5) [3, 4, 5, 6, 7]
  2. 测试文件.html:148 result13 = array5.every(item=>item>3)
  3. 测试文件.html:149 结果 false
  4. 测试文件.html:151 result14 = array5.every(item=>item>2)
  5. 测试文件.html:152 结果 true

every方法可以应用于现代浏览器及IE9及以上版本。

大小写的搜索

indexOf()和includes()都是区分大小写的，也就是说你必须要指定相同的字符才可搜索array。

  1. array6 (3) ['Kate', 'Tom', 'Jerry']
  2. 测试文件.html:158 result14 = array6.indexOf('tom')
  3. 测试文件.html:159 结果 -1
  4. 测试文件.html:161 result15 = array6.includes("tom")
  5. 测试文件.html:162 结果 false

实现不区分大小写的搜索的一种方法是使用map方法把每一个元素都修改为小写。

  1. array6 (3) ['Kate', 'Tom', 'Jerry']
  2. 测试文件.html:167 result16 = array6.map(item=>item.toLowerCase()).indexOf('tom')
  3. 测试文件.html:168 结果 1
  4. 测试文件.html:170 result17 = array6.map(item=>item.toLowerCase()).includes('tom')
  5. 测试文件.html:171 结果 true

另一个方法是使用some方法，一步中变小写和比较同时完成。

  1. array6 (3) ['Kate', 'Tom', 'Jerry']
  2. 测试文件.html:177 result17 = array6.some(item=>item.toLowerCase()==='tom')
  3. 测试文件.html:178 结果 true

filter()方法

得到array中所有满足某个条件的元素，并返回一个新的array。

  1. array5 (5) [3, 4, 5, 6, 7]
  2. 测试文件.html:183 result19 = array5.filter(item=>item>3)
  3. 测试文件.html:184 结果 (4) [4, 5, 6, 7]

如果没有满足条件的元素，filter()返回一个空的array。

  1. array5 (5) [3, 4, 5, 6, 7]
  2. 测试文件.html:189 result19 = array5.filter(item=>item>9)
  3. 测试文件.html:190 结果 []

总结

本文中，我们介绍了7中在array中判断某个元素是否存在的方法。很多人在这时候都可能会问，为什么会有这么多方法呢? 为什么不用一种方法来实现所有的功能呢?

简单的答案可能就是：这些方法都设计来完成一个不同的目的。

  • 想要知道元素的位置index，使用indexOf()
  • 想要知道元素最后出现在array中的位置index，使用lastIndexOf()
  • 只想知道array中是否包含某个元素，使用includes()
  • 想得到符合条件的元素，使用find()
  • 如果array中元素是object类型，用some()判断某个元素是否存在
  • 判断array中每一个元素都符合某个条件，用every()方法
  • 得到array中满足某个条件的所有元素的新array，使用filter方法

原文链接：https://www.toutiao.com/a7029180721725997581/

标签：

相关文章