Javascript中七種方法在Array中查找指定項
在Javascript中有很多方法可以實現(xiàn)查詢在一個array中是否包含一個元素。當(dāng)然可以使用for循環(huán)或者Array.indesOf()方法。現(xiàn)在，ES6添加了一些更有用的方法在array中搜索我們想要的結(jié)果。
indexof()方法
確定array中是否包含某個元素的最快的，最簡單方法就是使用array.indexof()。這個方法檢查array是否包含某個指定的元素，返回它的index，如果不包含，返回-1。
- array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:13 const apple = array1.indexOf("蘋果")
- 測試文件.html:14 結(jié)果： 0
- 測試文件.html:15 ----------------------------
- 測試文件.html:18 array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:19 const lizi = array1.indexOf("李子")
- 測試文件.html:20 結(jié)果 1
- 測試文件.html:21 ----------------------------
默認情況下，indexof從array的第一個元素開始搜索，在最后一個元素結(jié)束。你可以傳入第二個參數(shù)，指定開始元素的index(0開始)。
- array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:25 const lizi1 = array1.indexOf("李子",1)
- 測試文件.html:26 結(jié)果 1
- 測試文件.html:27 ----------------------------
- 測試文件.html:30 array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:31 const lizi2 = array1.indexOf("李子",2)
- 測試文件.html:32 結(jié)果 -1
- 測試文件.html:33 ----------------------------
- 測試文件.html:36 array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:38 const shizi = array1.indexOf("柿子",2)
- 測試文件.html:39 結(jié)果: 3
- 測試文件.html:40 ----------------------------
需要注意的是，indexof返回第一個搜索到的結(jié)果，也就是array中第一個出現(xiàn)的元素的index。
lastIndexOf()方法
Javascript還提供了一個lastIndexOf()方法，顧名思義，它從array的最后一個元素開始搜索，在第一個元素停止。返回第一個搜索到的元素的index，也就是array中最后一次出現(xiàn)的元素的index。同樣，也可以傳入第二個參數(shù)，跳過一些搜索的元素。
- array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:44 const shizi1 = array1.lastIndexOf("柿子")
- 測試文件.html:45 結(jié)果: 3
- 測試文件.html:46 ----------------------------
- 測試文件.html:49 array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:51 const lianpen = array1.lastIndexOf("臉盆")
- 測試文件.html:52 結(jié)果: -1
- 測試文件.html:53 ----------------------------
- 測試文件.html:55 array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:57 const shizi2 = array1.lastIndexOf("柿子",2)
- 測試文件.html:58 結(jié)果: -1
在所有的瀏覽器中，包括IE9及以上的版本，indexOf()和lastIndexOf()都是區(qū)分大小寫的。
includes()方法
inclludes方法是ES6的一部分，可以用來確定array是否包含某個元素。如果包含，返回true, 不包含，返回false。是一個比較好的方法檢查某個元素是否存在，結(jié)果為一個boolean類型。
- array1 (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:63 const shizi3 = array1.includes("柿子")
- 測試文件.html:64 結(jié)果: true
默認情況下，includes()搜索整個array， 你仍然可以傳入第二個參數(shù)，指定開始搜索的位置。
- array1 (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:69 const lizi3 = array1.includes("李子",1)
- 測試文件.html:70 結(jié)果: true
- 測試文件.html:71 ----------------------------
- 測試文件.html:73 array1 (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:75 const lizi4 = array1.includes("李子",2)
- 測試文件.html:76 結(jié)果: false
- 測試文件.html:77 ----------------------------
includes也適用于與array中包含其他基本類型的元素。
- array2 (8) [1, 2, empty, '1', '2', null, true, undefined]
- 測試文件.html:82 result = array2.includes(null)
- 測試文件.html:83 結(jié)果: true
- 測試文件.html:85 result1 = array2.includes(true)
- 測試文件.html:86 結(jié)果: true
- 測試文件.html:88 result2 = array2.includes(1)
- 測試文件.html:89 結(jié)果: true
- 測試文件.html:91 result3 = array2.includes(undefined)
- 測試文件.html:92 結(jié)果: true
- 測試文件.html:93 ----------------------------
includes和indexOf對于NaN有不同的反應(yīng)。
- array3 (8) [1, 2, empty, '1', NaN, null, true, undefined]
- 測試文件.html:98 result4 = array3.includes(NaN)
- 測試文件.html:99 結(jié)果： true
- 測試文件.html:101 result5 = array3.indexOf(NaN)
- 測試文件.html:102 結(jié)果： -1
- 測試文件.html:103 ----------------------------
includes()在IE中不支持。
find()方法
跟includes不同，find在array中每一個元素執(zhí)行一個條件，返回第一個符合條件的元素本身。
- array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:107 result6 = array1.find(item=>item==="柿子")
- 測試文件.html:108 結(jié)果： 柿子
- 測試文件.html:109 ----------------------------
上例中使用了arrow function，它是ES6中的概念。
如果沒有元素能夠滿足條件函數(shù)，則返回undefined。
- array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:113 result7 = array1.find(item=>item==="臉盆")
- 測試文件.html:114 結(jié)果： undefined
你也可以傳入第二個參數(shù)，作為當(dāng)前元素的index，如果你想比對index時尤其有用。
- array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:119 result8 = array1.find((item,index)=>item==="柿子" && index>2)
- 測試文件.html:120 結(jié)果 柿子
- 測試文件.html:122 result9 = array1.find((item,index)=>item==="李子" && index>2)
- 測試文件.html:123 結(jié)果 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 結(jié)果 {name: '小周'}
find()不可用與IE瀏覽器
some()方法
some方法跟find相似，不同的是返回的結(jié)果是true或者false。
- array1: (5) ['蘋果', '李子', '栗子', '柿子', '梨']
- 測試文件.html:135 result11 = array1.some(item=>item==="柿子")
- 測試文件.html:136 結(jié)果 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 結(jié)果 true
some()可用于IE9及以上版本，以及其他現(xiàn)代瀏覽器。
every()方法
every()方法要求array中每一個元素都符合一個條件。
- array5 (5) [3, 4, 5, 6, 7]
- 測試文件.html:148 result13 = array5.every(item=>item>3)
- 測試文件.html:149 結(jié)果 false
- 測試文件.html:151 result14 = array5.every(item=>item>2)
- 測試文件.html:152 結(jié)果 true
every方法可以應(yīng)用于現(xiàn)代瀏覽器及IE9及以上版本。
大小寫的搜索
indexOf()和includes()都是區(qū)分大小寫的，也就是說你必須要指定相同的字符才可搜索array。
- array6 (3) ['Kate', 'Tom', 'Jerry']
- 測試文件.html:158 result14 = array6.indexOf('tom')
- 測試文件.html:159 結(jié)果 -1
- 測試文件.html:161 result15 = array6.includes("tom")
- 測試文件.html:162 結(jié)果 false
實現(xiàn)不區(qū)分大小寫的搜索的一種方法是使用map方法把每一個元素都修改為小寫。
- array6 (3) ['Kate', 'Tom', 'Jerry']
- 測試文件.html:167 result16 = array6.map(item=>item.toLowerCase()).indexOf('tom')
- 測試文件.html:168 結(jié)果 1
- 測試文件.html:170 result17 = array6.map(item=>item.toLowerCase()).includes('tom')
- 測試文件.html:171 結(jié)果 true
另一個方法是使用some方法，一步中變小寫和比較同時完成。
- array6 (3) ['Kate', 'Tom', 'Jerry']
- 測試文件.html:177 result17 = array6.some(item=>item.toLowerCase()==='tom')
- 測試文件.html:178 結(jié)果 true
filter()方法
得到array中所有滿足某個條件的元素，并返回一個新的array。
- array5 (5) [3, 4, 5, 6, 7]
- 測試文件.html:183 result19 = array5.filter(item=>item>3)
- 測試文件.html:184 結(jié)果 (4) [4, 5, 6, 7]
如果沒有滿足條件的元素，filter()返回一個空的array。
- array5 (5) [3, 4, 5, 6, 7]
- 測試文件.html:189 result19 = array5.filter(item=>item>9)
- 測試文件.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方法
