自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Javascript中七種方法在Array中查找指定項

作者：老許學(xué)編程
開發(fā) 前端
在Javascript中有很多方法可以實現(xiàn)查詢在一個array中是否包含一個元素。當(dāng)然可以使用for循環(huán)或者Array.indesOf()方法?，F(xiàn)在，ES6添加了一些更有用的方法在array中搜索我們想要的結(jié)果。

在Javascript中有很多方法可以實現(xiàn)查詢在一個array中是否包含一個元素。當(dāng)然可以使用for循環(huán)或者Array.indesOf()方法?，F(xiàn)在，ES6添加了一些更有用的方法在array中搜索我們想要的結(jié)果。

[[434551]]

indexof()方法

確定array中是否包含某個元素的最快的，最簡單方法就是使用array.indexof()。這個方法檢查array是否包含某個指定的元素，返回它的index，如果不包含，返回-1。 

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

 默認(rèn)情況下，indexof從array的第一個元素開始搜索，在最后一個元素結(jié)束。你可以傳入第二個參數(shù)，指定開始元素的index(0開始)。 

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

需要注意的是，indexof返回第一個搜索到的結(jié)果，也就是array中第一個出現(xiàn)的元素的index。

lastIndexOf()方法

Javascript還提供了一個lastIndexOf()方法，顧名思義，它從array的最后一個元素開始搜索，在第一個元素停止。返回第一個搜索到的元素的index，也就是array中最后一次出現(xiàn)的元素的index。同樣，也可以傳入第二個參數(shù)，跳過一些搜索的元素。 

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

在所有的瀏覽器中，包括IE9及以上的版本，indexOf()和lastIndexOf()都是區(qū)分大小寫的。

includes()方法

inclludes方法是ES6的一部分，可以用來確定array是否包含某個元素。如果包含，返回true, 不包含，返回false。是一個比較好的方法檢查某個元素是否存在，結(jié)果為一個boolean類型。 

  1. array1 (5) ['蘋果', '李子', '栗子', '柿子', '梨'] 
  2. 測試文件.html:63 const shizi3 = array1.includes("柿子") 
  3. 測試文件.html:64 結(jié)果: true 

默認(rèn)情況下，includes()搜索整個array， 你仍然可以傳入第二個參數(shù)，指定開始搜索的位置。

  1. array1 (5) ['蘋果', '李子', '栗子', '柿子', '梨'] 
  2. 測試文件.html:69 const lizi3 = array1.includes("李子",1) 
  3. 測試文件.html:70 結(jié)果: true 
  4. 測試文件.html:71 ---------------------------- 
  5. 測試文件.html:73 array1 (5) ['蘋果', '李子', '栗子', '柿子', '梨'] 
  6. 測試文件.html:75 const lizi4 = array1.includes("李子",2) 
  7. 測試文件.html:76 結(jié)果: 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 結(jié)果: true 
  4. 測試文件.html:85 result1 = array2.includes(true) 
  5. 測試文件.html:86 結(jié)果: true 
  6. 測試文件.html:88 result2 = array2.includes(1) 
  7. 測試文件.html:89 結(jié)果: true 
  8. 測試文件.html:91 result3 = array2.includes(undefined) 
  9. 測試文件.html:92 結(jié)果: true 
  10. 測試文件.html:93 ---------------------------- 

includes和indexOf對于NaN有不同的反應(yīng)。 

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

includes()在IE中不支持。

find()方法

跟includes不同，find在array中每一個元素執(zhí)行一個條件，返回第一個符合條件的元素本身。 

  1. array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨'] 
  2. 測試文件.html:107 result6 = array1.find(item=>item==="柿子") 
  3. 測試文件.html:108 結(jié)果： 柿子 
  4. 測試文件.html:109 ---------------------------- 

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

如果沒有元素能夠滿足條件函數(shù)，則返回undefined。 

  1. array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨'] 
  2. 測試文件.html:113 result7 = array1.find(item=>item==="臉盆") 
  3. 測試文件.html:114 結(jié)果： undefined 

你也可以傳入第二個參數(shù)，作為當(dāng)前元素的index，如果你想比對index時尤其有用。 

  1. array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨'] 
  2. 測試文件.html:119 result8 = array1.find((item,index)=>item==="柿子" && index>2) 
  3. 測試文件.html:120 結(jié)果 柿子 
  4. 測試文件.html:122 result9 = array1.find((item,index)=>item==="李子" && index>2) 
  5. 測試文件.html:123 結(jié)果 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 結(jié)果 {name: '小周'} 

find()不可用與IE瀏覽器

some()方法

some方法跟find相似，不同的是返回的結(jié)果是true或者false。 

  1. array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨'] 
  2. 測試文件.html:135 result11 = array1.some(item=>item==="柿子") 
  3. 測試文件.html:136 結(jié)果 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 結(jié)果 true 

some()可用于IE9及以上版本，以及其他現(xiàn)代瀏覽器。

every()方法

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

  1. array5 (5) [3, 4, 5, 6, 7] 
  2. 測試文件.html:148 result13 = array5.every(item=>item>3) 
  3. 測試文件.html:149 結(jié)果 false 
  4. 測試文件.html:151 result14 = array5.every(item=>item>2) 
  5. 測試文件.html:152 結(jié)果 true 

every方法可以應(yīng)用于現(xiàn)代瀏覽器及IE9及以上版本。

大小寫的搜索

indexOf()和includes()都是區(qū)分大小寫的，也就是說你必須要指定相同的字符才可搜索array。 

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

實現(xiàn)不區(qū)分大小寫的搜索的一種方法是使用map方法把每一個元素都修改為小寫。 

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

另一個方法是使用some方法，一步中變小寫和比較同時完成。 

  1. array6 (3) ['Kate', 'Tom', 'Jerry'] 
  2. 測試文件.html:177 result17 = array6.some(item=>item.toLowerCase()==='tom') 
  3. 測試文件.html:178 結(jié)果 true 

filter()方法

得到array中所有滿足某個條件的元素，并返回一個新的array。 

  1. array5 (5) [3, 4, 5, 6, 7] 
  2. 測試文件.html:183 result19 = array5.filter(item=>item>3) 
  3. 測試文件.html:184 結(jié)果 (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 結(jié)果 [] 

總結(jié)

本文中，我們介紹了7中在array中判斷某個元素是否存在的方法。很多人在這時候都可能會問，為什么會有這么多方法呢? 為什么不用一種方法來實現(xiàn)所有的功能呢?

簡單的答案可能就是：這些方法都設(shè)計來完成一個不同的目的。 

  • 想要知道元素的位置index，使用indexOf()
  • 想要知道元素最后出現(xiàn)在array中的位置index，使用lastIndexOf()
  • 只想知道array中是否包含某個元素，使用includes()
  • 想得到符合條件的元素，使用find()
  • 如果array中元素是object類型，用some()判斷某個元素是否存在
  • 判斷array中每一個元素都符合某個條件，用every()方法
  • 得到array中滿足某個條件的所有元素的新array，使用filter方法
責(zé)任編輯：華軒 來源： 今日頭條
JavaScriptarry編程開發(fā)
相關(guān)推薦

2022-05-24 14:37:49

React條件渲染

2011-12-16 14:45:36

JavaJSP

2011-05-30 13:37:46

JSP

2022-08-31 10:09:55

網(wǎng)絡(luò)彈性智能建筑

2023-05-22 14:23:26

機(jī)器人安全

2016-09-28 20:05:22

2025-01-15 10:46:23

開發(fā)JavaScript集合

2013-07-25 09:32:58

虛擬化數(shù)據(jù)丟失

2013-10-16 15:56:41

虛擬化數(shù)據(jù)丟失

2024-10-08 09:06:01

Spring應(yīng)用程序配置

2020-06-23 14:51:13

JavaScript字符字符串

2023-04-18 15:57:30

2022-10-27 08:09:33

2024-07-29 08:00:00

2022-09-30 10:48:12

AR制造業(yè)

2022-01-17 21:11:32

Windows 11Windows微軟

2021-07-02 10:43:52

IT人才首席信息官人才招聘

2016-12-27 19:19:51

2009-10-29 16:32:24

查看Oracle用戶的

2020-08-01 16:19:13

JavaScript字符串開發(fā)
點贊
收藏

51CTO技術(shù)棧公眾號