我在學習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,'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

3.find()與findIndex()方法

let arr = [1,'echo'];

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

find方法是比較推薦的做法，find方法會找到第一個符合條件的陣列元素，並返回它，如果沒找到則返回undefined。

需要注意的是，只要find找到符合條件的物件後不會繼續遍歷，可以說自帶了break操作，加上箭頭函式簡化回撥，整體程式碼非常直觀。

let arr = [1,'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，這兩個方法都比較推薦。

4.some()方法

let arr = [1,'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));

5.includes()方法

ES6新增的陣列方法，用於檢測陣列是否包含某個元素，如果包含返回true，否則返回false，比較厲害的是，能直接檢測NaN：

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

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

缺點是低版本瀏覽器支援不是很友好，當然能用我們還是用，不能用我們就自己封裝：

let hasEle = (() =>
  Array.prototype.includes ?
  (arr,val) => arr.includes(val) :
  (arr,val) => arr.some(ele => Object.is(val,ele))
)();

hasEle([1,NaN],1) //true
hasEle([1,NaN) //true
hasEle([1,'聽風是風') //false

希望到這裡，在以後查詢某陣列是否包含某元素時，你又多了幾種新的花樣。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。