我在學(xué)習(xí)ES6數(shù)組拓展時(shí)，發(fā)現(xiàn)了新增了不少了有趣的數(shù)組方法，突然想好工作中判斷數(shù)組是否包含某個(gè)元素是非常常見(jiàn)的操作，那么這篇文章順便做個(gè)整理。

1.for循環(huán)結(jié)合break

可能很多人第一會(huì)想到for循環(huán)，畢竟for是最為保險(xiǎn)和熟悉的操作：

let arr = [1, 2, undefined, ’聽(tīng)風(fēng)是風(fēng)’, ’echo’], i = 0;const LENGTH = arr.length;//初始化result狀態(tài)，只要能找到匹配的則修改為truelet result = false;for (; i < LENGTH; i++) { if (arr[i] === ’聽(tīng)風(fēng)是風(fēng)’) { result = true; break; };};if (result) { //do something...};

使用for的好處是，能結(jié)合break在找到滿(mǎn)足條件的情況下，立刻跳出循環(huán)，如果第一個(gè)元素就符合條件，那后續(xù)循環(huán)步驟都可以?xún)?yōu)化直接跳過(guò)了。

使用for的缺點(diǎn)是，查找不夠直觀，我們?cè)趂or循環(huán)中無(wú)法直接return查詢(xún)結(jié)果，當(dāng)然你可以將for循環(huán)寫(xiě)在一個(gè)函數(shù)中，但你還是需要額外定義個(gè)result變量。

其次，對(duì)于數(shù)組操作，我們雖然能使用for循環(huán)解決很多問(wèn)題，但我們不能把目光永遠(yuǎn)第一個(gè)投向for，除了for呢？試著將目光投向更多數(shù)組高階函數(shù)，思考更多可能是非常必要的。

說(shuō)到for你肯定會(huì)本能想到forEach，雖然forEach能使用回調(diào)函數(shù)，但依舊無(wú)法在回調(diào)函數(shù)中使用return，外加上無(wú)法直接使用break，這里就不做介紹了。

最后，for循環(huán)與forEach對(duì)于查找NaN不那么實(shí)用，畢竟NaN是唯一一個(gè)不等于自己的存在，當(dāng)然也能實(shí)現(xiàn)又能判斷NaN還能判斷其它非NaN對(duì)象，只是比較麻煩了。

2.Arr.indexOf()方法

let arr = [1, 2, undefined, ’聽(tīng)風(fēng)是風(fēng)’, ’echo’];//利用indexOf查找下標(biāo)的特性let result = arr.indexOf(’聽(tīng)風(fēng)是風(fēng)’);//3if (result>-1) { //do something...};

indexOf方法會(huì)從頭到尾的檢索數(shù)組，如果找到了第一個(gè)符合條件的元素則返回該元素的下標(biāo)，如果沒(méi)找到則返回-1，所以只要能找到最小下標(biāo)也應(yīng)該是0，這才有了if(result>-1)的寫(xiě)法。

相對(duì)for循環(huán)來(lái)說(shuō)，indexOf寫(xiě)法上簡(jiǎn)潔了不少，但相比f(wàn)or循環(huán)能使用break，indexOf即便找到了想要的元素，它還是不會(huì)停下檢索的腳步，這點(diǎn)就不太優(yōu)化了。

其次，語(yǔ)義化不太友好，我們是希望判斷一個(gè)數(shù)組有沒(méi)有某個(gè)元素，結(jié)果我們到底是拿了下標(biāo)來(lái)做判斷，當(dāng)然，對(duì)于NaN查找也不那么友好。

[NaN].indexOf(NaN);//-1

3.find()與findIndex()方法

let arr = [1, 2, undefined, ’聽(tīng)風(fēng)是風(fēng)’, ’echo’];//利用indexOf查找下標(biāo)的特性let result = arr.find(ele => ele === ’聽(tīng)風(fēng)是風(fēng)’)//聽(tīng)風(fēng)之風(fēng)if (result) { //do something...};

find方法是比較推薦的做法，find方法會(huì)找到第一個(gè)符合條件的數(shù)組元素，并返回它，如果沒(méi)找到則返回undefined。

需要注意的是，只要find找到符合條件的對(duì)象后不會(huì)繼續(xù)遍歷，可以說(shuō)自帶了break操作，加上箭頭函數(shù)簡(jiǎn)化回調(diào)，整體代碼非常直觀。

let arr = [1, 2, undefined, ’聽(tīng)風(fēng)是風(fēng)’, ’echo’];//利用indexOf查找下標(biāo)的特性let result = arr.findIndex(ele => ele === ’聽(tīng)風(fēng)是風(fēng)’)//3if (result>-1) { //do something...};

findIndex方法與find方法非常類(lèi)似，只是它返回的不是符合條件的對(duì)象，而是該對(duì)象的下標(biāo)，找到后同樣會(huì)跳出循環(huán)，如果沒(méi)找到則返回-1，這一點(diǎn)與indexOf有點(diǎn)類(lèi)似。

比較理想的是，find方法還能結(jié)合Object.is()方法判斷NaN，當(dāng)然也能判斷其它對(duì)象，是不是非常的奈斯？

[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

寫(xiě)法簡(jiǎn)潔，自帶break，還能判斷NaN，這兩個(gè)方法都比較推薦。

4.some()方法

let arr = [1, 2, undefined, ’聽(tīng)風(fēng)是風(fēng)’, ’echo’];//利用indexOf查找下標(biāo)的特性let result = arr.some(ele => ele === ’聽(tīng)風(fēng)是風(fēng)’) //trueif (result) { //do something...};

some方法同樣用于檢測(cè)是否有滿(mǎn)足條件的元素，如果有，則不繼續(xù)檢索后面的元素，直接返回true，如果都不符合，則返回一個(gè)false。

用法與find相似，只是find是返回滿(mǎn)足條件的元素，some返回的是一個(gè)Boolean值，從語(yǔ)義化來(lái)說(shuō)，是否包含返回布爾值更貼切。

當(dāng)然，some方法同樣能結(jié)合Object.is()方法檢測(cè)NaN。some也是較為推薦的方法

[NaN].some(ele => Object.is(NaN, ele));

5.includes()方法

ES6新增的數(shù)組方法，用于檢測(cè)數(shù)組是否包含某個(gè)元素，如果包含返回true，否則返回false，比較厲害的是，能直接檢測(cè)NaN：

[1, 3, ’echo’].includes(’echo’); //true[NaN, 3, ’echo’].includes(NaN); //true[1, 3, ’echo’].includes(’聽(tīng)風(fēng)是風(fēng)’); //false

優(yōu)點(diǎn)就不用說(shuō)了，最簡(jiǎn)單的做法沒(méi)有之一，不用回調(diào)，不用復(fù)雜的寫(xiě)法，一個(gè)方法直接搞定。

缺點(diǎn)是低版本瀏覽器支持不是很友好，當(dāng)然能用我們還是用，不能用我們就自己封裝：

let hasEle = (() => Array.prototype.includes ? (arr, val) => arr.includes(val) : (arr, val) => arr.some(ele => Object.is(val, ele)))();hasEle([1, 2, NaN], 1) //truehasEle([1, 2, NaN], NaN) //truehasEle([1, 2, NaN], ’聽(tīng)風(fēng)是風(fēng)’) //false

希望到這里，在以后查找某數(shù)組是否包含某元素時(shí)，你又多了幾種新的花樣。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。