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

作者：老許學編程 2021-11-11 14:50:01

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

indexof()方法

確定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。

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 結果 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()方法

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()方法

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

filter()方法

得到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方法

責任編輯：華軒來源：今日頭條

JavaScript arry編程開發