JS判斷數組是否包含某元素

我在學習ES6數組拓展時，發現了新增了很多了有趣的數組方法，忽然想好工做中判斷數組是否包含某個元素是很是常見的操做，那麼這篇文章順便作個整理。

1.for循環結合break

可能不少人第一會想到for循環，畢竟for是最爲保險和熟悉的操做：

let arr = [1, 2, undefined, '聽風是風', 'echo'],
    i = 0;
const LENGTH = arr.length;

//初始化result狀態，只要能找到匹配的則修改成true
let result = false;
for (; i < LENGTH; i++) {
    if (arr[i] === '聽風是風') {
        result = true;
        break;
    };
};
if (result) {
    //do something...
};

使用for的好處是，能結合break在找到知足條件的狀況下，馬上跳出循環，若是第一個元素就符合條件，那後續循環步驟均可以優化直接跳過了。

使用for的缺點是，查找不夠直觀，咱們在for循環中沒法直接return查詢結果，固然你能夠將for循環寫在一個函數中，但你仍是須要額外定義個result變量。

其次，對於數組操做，咱們雖然能使用for循環解決不少問題，但咱們不能把目光永遠第一個投向for，除了for呢？試着將目光投向更多數組高階函數，思考更多多是很是必要的。

說到for你確定會本能想到forEach，雖然forEach能使用回調函數，但依舊沒法在回調函數中使用return，外加上沒法直接使用break，這裏就不作介紹了。

最後，for循環與forEach對於查找NaN不那麼實用，畢竟NaN是惟一一個不等於本身的存在，固然也能實現又能判斷NaN還能判斷其它非NaN對象，只是比較麻煩了。

2.Arr.indexOf()方法

let arr = [1, 2, undefined, '聽風是風', 'echo'];

//利用indexOf查找下標的特性
let result = arr.indexOf('聽風是風');//3
if (result>-1) {
    //do something...
};

indexOf方法會從頭至尾的檢索數組，若是找到了第一個符合條件的元素則返回該元素的下標，若是沒找到則返回-1，因此只要能找到最小下標也應該是0，這纔有了if(result>-1)的寫法。

相對for循環來講，indexOf寫法上簡潔了很多，但相比for循環能使用break，indexOf即使找到了想要的元素，它仍是不會停下檢索的腳步，這點就不太優化了。

其次，語義化不太友好，咱們是但願判斷一個數組有沒有某個元素，結果咱們究竟是拿了下標來作判斷，固然，對於NaN查找也不那麼友好。

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

2.find()與findIndex()方法

let arr = [1, 2, undefined, '聽風是風', 'echo'];

//利用indexOf查找下標的特性
let result = arr.find(ele => ele === '聽風是風')//聽風之風
if (result) {
    //do something...
};

find方法是比較推薦的作法，find方法會找到第一個符合條件的數組元素，並返回它，若是沒找到則返回undefined。

須要注意的是，只要find找到符合條件的對象後不會繼續遍歷，能夠說自帶了break操做，加上箭頭函數簡化回調，總體代碼很是直觀。

let arr = [1, 2, undefined, '聽風是風', 'echo'];

//利用indexOf查找下標的特性
let result = arr.findIndex(ele => ele === '聽風是風')//3
if (result>-1) {
    //do something...
};

findIndex方法與find方法很是相似，只是它返回的不是符合條件的對象，而是該對象的下標，找到後一樣會跳出循環，若是沒找到則返回-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，這兩個方法都比較推薦。

3.some()方法

let arr = [1, 2, undefined, '聽風是風', 'echo'];

//利用indexOf查找下標的特性
let result = arr.some(ele => ele === '聽風是風') //true
if (result) {
    //do something...
};

some方法一樣用於檢測是否有知足條件的元素，若是有，則不繼續檢索後面的元素，直接返回true，若是都不符合，則返回一個false。

用法與find類似，只是find是返回知足條件的元素，some返回的是一個Boolean值，從語義化來講，是否包含返回布爾值更貼切。

固然，some方法一樣能結合Object.is()方法檢測NaN。some也是較爲推薦的方法

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

4.includes()方法

ES6新增的數組方法，用於檢測數組是否包含某個元素，若是包含返回true，不然返回false，比較厲害的是，能直接檢測NaN：

[1, 3, 'echo'].includes('echo'); //true
[NaN, 3, 'echo'].includes(NaN); //true
[1, 3, 'echo'].includes('聽風是風'); //false

優勢就不用說了，最簡單的作法沒有之一，不用回調，不用複雜的寫法，一個方法直接搞定。

缺點是低版本瀏覽器支持不是很友好，固然能用咱們仍是用，不能用咱們就本身封裝：

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

但願到這裏，在之後查找某數組是否包含某元素時，你又多了幾種新的花樣。