Javascript中七種方法在Array中查找指定項
在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方法
