JS判斷數(shù)組是否包含某元素實現(xiàn)方法匯總
我在學習ES6數(shù)組拓展時,發(fā)現(xiàn)了新增了不少了有趣的數(shù)組方法,突然想好工作中判斷數(shù)組是否包含某個元素是非常常見的操作,那么這篇文章順便做個整理。
1.for循環(huán)結合break
可能很多人第一會想到for循環(huán),畢竟for是最為保險和熟悉的操作:
let arr = [1, 2, undefined, '聽風是風', 'echo'], i = 0; const LENGTH = arr.length; //初始化result狀態(tài),只要能找到匹配的則修改為true let result = false; for (; i < LENGTH; i++) { if (arr[i] === '聽風是風') { result = true; break; }; }; if (result) { //do something... };
使用for的好處是,能結合break在找到滿足條件的情況下,立刻跳出循環(huán),如果第一個元素就符合條件,那后續(xù)循環(huán)步驟都可以優(yōu)化直接跳過了。
使用for的缺點是,查找不夠直觀,我們在for循環(huán)中無法直接return查詢結果,當然你可以將for循環(huán)寫在一個函數(shù)中,但你還是需要額外定義個result變量。
其次,對于數(shù)組操作,我們雖然能使用for循環(huán)解決很多問題,但我們不能把目光永遠第一個投向for,除了for呢?試著將目光投向更多數(shù)組高階函數(shù),思考更多可能是非常必要的。
說到for你肯定會本能想到forEach,雖然forEach能使用回調(diào)函數(shù),但依舊無法在回調(diào)函數(shù)中使用return,外加上無法直接使用break,這里就不做介紹了。
最后,for循環(huán)與forEach對于查找NaN不那么實用,畢竟NaN是唯一一個不等于自己的存在,當然也能實現(xiàn)又能判斷NaN還能判斷其它非NaN對象,只是比較麻煩了。
2.Arr.indexOf()方法
let arr = [1, 2, undefined, '聽風是風', 'echo']; //利用indexOf查找下標的特性 let result = arr.indexOf('聽風是風');//3 if (result>-1) { //do something... };
indexOf方法會從頭到尾的檢索數(shù)組,如果找到了第一個符合條件的元素則返回該元素的下標,如果沒找到則返回-1,所以只要能找到最小下標也應該是0,這才有了if(result>-1)的寫法。
相對for循環(huán)來說,indexOf寫法上簡潔了不少,但相比for循環(huán)能使用break,indexOf即便找到了想要的元素,它還是不會停下檢索的腳步,這點就不太優(yōu)化了。
其次,語義化不太友好,我們是希望判斷一個數(shù)組有沒有某個元素,結果我們到底是拿了下標來做判斷,當然,對于NaN查找也不那么友好。
[NaN].indexOf(NaN);//-1
3.find()與findIndex()方法
let arr = [1, 2, undefined, '聽風是風', 'echo']; //利用indexOf查找下標的特性 let result = arr.find(ele => ele === '聽風是風')//聽風之風 if (result) { //do something... };
find方法是比較推薦的做法,find方法會找到第一個符合條件的數(shù)組元素,并返回它,如果沒找到則返回undefined。
需要注意的是,只要find找到符合條件的對象后不會繼續(xù)遍歷,可以說自帶了break操作,加上箭頭函數(shù)簡化回調(diào),整體代碼非常直觀。
let arr = [1, 2, undefined, '聽風是風', 'echo']; //利用indexOf查找下標的特性 let result = arr.findIndex(ele => ele === '聽風是風')//3 if (result>-1) { //do something... };
findIndex方法與find方法非常類似,只是它返回的不是符合條件的對象,而是該對象的下標,找到后同樣會跳出循環(huán),如果沒找到則返回-1,這一點與indexOf有點類似。
比較理想的是,find方法還能結合Object.is()方法判斷NaN,當然也能判斷其它對象,是不是非常的奈斯?
[NaN].find(ele => Object.is(NaN, ele)); //NaN
[1].find(ele => Object.is(1, ele)); //1
[NaN].findIndex(ele => Object.is(NaN, ele)); //0
[1].findIndex(ele => Object.is(1, ele)); //0
寫法簡潔,自帶break,還能判斷NaN,這兩個方法都比較推薦。
4.some()方法
let arr = [1, 2, undefined, '聽風是風', 'echo']; //利用indexOf查找下標的特性 let result = arr.some(ele => ele === '聽風是風') //true if (result) { //do something... };
some方法同樣用于檢測是否有滿足條件的元素,如果有,則不繼續(xù)檢索后面的元素,直接返回true,如果都不符合,則返回一個false。
用法與find相似,只是find是返回滿足條件的元素,some返回的是一個Boolean值,從語義化來說,是否包含返回布爾值更貼切。
當然,some方法同樣能結合Object.is()方法檢測NaN。some也是較為推薦的方法
[NaN].some(ele => Object.is(NaN, ele));
5.includes()方法
ES6新增的數(shù)組方法,用于檢測數(shù)組是否包含某個元素,如果包含返回true,否則返回false,比較厲害的是,能直接檢測NaN:
[1, 3, 'echo'].includes('echo'); //true
[NaN, 3, 'echo'].includes(NaN); //true
[1, 3, 'echo'].includes('聽風是風'); //false
優(yōu)點就不用說了,最簡單的做法沒有之一,不用回調(diào),不用復雜的寫法,一個方法直接搞定。
缺點是低版本瀏覽器支持不是很友好,當然能用我們還是用,不能用我們就自己封裝:
let hasEle = (() => Array.prototype.includes ? (arr, val) => arr.includes(val) : (arr, val) => arr.some(ele => Object.is(val, ele)) )(); hasEle([1, 2, NaN], 1) //true hasEle([1, 2, NaN], NaN) //true hasEle([1, 2, NaN], '聽風是風') //false
希望到這里,在以后查找某數(shù)組是否包含某元素時,你又多了幾種新的花樣。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript簡化代碼 A=alert w=document.writeln
建議不要這樣寫代碼,考慮以后的修改才是最重要的,代碼分層.多把一個功能寫成一個js代碼或一個類,然后提供接口,這種寫法代碼會更多,速度也更慢,但人人都推薦這樣寫,是因為這樣子維護方便.而程序不可能一次性寫得完美的,永遠都可以改進2008-02-02讓網(wǎng)頁根據(jù)不同IE版本顯示不同的內(nèi)容
在上一篇blog 《IE8里判斷當前網(wǎng)頁顯示模式》里面提到IE有不同的顯示模式以及如何用Javascript 來動態(tài)判定。 Web開發(fā)者可以根據(jù)不同顯示模式導入不同的內(nèi)容。2009-02-02js前端加載超大圖片(100M以上)實現(xiàn)秒開的最佳解決方案
前端加載超大圖片時,一般可以采取圖片壓縮,圖片分割,預加載等措施,而對于幾百M或上G的大圖而言,不管對圖片進行怎么優(yōu)化或加速處理,要實現(xiàn)秒開也是不太可能的事情,所以本文小編將給大家介紹如何對大圖進行分割,在前端進行拼接實現(xiàn)秒開,需要的朋友可以參考下2023-10-10