前言

在前端開發(fā)中， 經(jīng)常會遇到需要判斷某個元素是否存在于數(shù)組中的場景。其實判斷方法有很多種，今天就跟大家來一起一個一個的了解下。

先來定義一個數(shù)組：

const arr = [
13,
false,
'abcd',
undefined,
13,
null,
NaN,
 [1, 2],
 { a: 123 },
() => Date.now(),
new Date('2021/03/04'),
new RegExp('abc', 'ig'),
 Symbol('sym'),
];

在這個數(shù)組中，我們包含了好幾種類型：number, boolean, string, undefined, null, array, object, Date, Symbol 等。其中數(shù)字 13 出現(xiàn)了 2 次。

接下來我們來看下具體實現(xiàn)的方法。

1. indexOf

我們最熟悉的就是indexOf()了，畢竟他出現(xiàn)的早，兼容性也好，使用起來也很方便。

1.1，indexOf

語法：

array.indexOf(item,start)

參數(shù)說明：

• item：必需。要查找的元素。
• start：可選的整數(shù)參數(shù)。規(guī)定在數(shù)組中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的首字符開始檢索。

使用方式：

只要判斷返回的數(shù)據(jù)是不是-1，就能知道數(shù)組中是否包含該元素。

arr.indexOf(13) >= 0; // true, indexOf返回0
arr.indexOf(false) >= 0; // true, indexOf返回1
arr.indexOf(undefined) >= 0; // true, indexOf返回3
arr.indexOf(2) >= 0; // false, indexOf返回-1

1.2，lastIndexOf

語法：

array.lastIndexOf(item,start)

參數(shù)說明：

• item：必需。要查找的元素。
• start：可選的整數(shù)參數(shù)。規(guī)定在數(shù)組中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的首字符開始檢索。

使用方式同indexOf。

1.3，第2個可選參數(shù)

indexOf 和 lastIndexOf 還有第 2 個可選參數(shù) start，用來表示從哪個索引開始進(jìn)行搜索。

在 indexOf 中，若 start超過數(shù)組的長度，則直接返回-1，若為負(fù)數(shù)，則從最后往前數(shù)幾個索引（arr.length-Math.abs(start)），然后開始往后搜索。

在 lastIndexOf 中，若 start達(dá)到或超過數(shù)組的長度，則搜索整個數(shù)組；若為負(fù)數(shù)，則從最后往前數(shù)幾個索引（arr.length-Math.abs(start)），然后開始往前搜索，若負(fù)數(shù)的絕對值超過了數(shù)組的長度，則直接返回-1。

arr.indexOf(13, 2); // 4, 從索引值2開始往后查找，首先找到的13的索引值為4
arr.indexOf(13, -10); // 4, 從索引值1(11-10)開始往后檢索
arr.lastIndexOf(13, 2); // 0, 從索引值2往前開始搜索
arr.lastIndexOf(13, -2); // 4, 從索引值9(11-2)開始往前搜索

2. includes

includes() 方法用來判斷一個數(shù)組是否包含一個指定的值，如果是返回 true，否則false。

語法：

array.includes(searchElement, fromIndex)

參數(shù)說明：

• searchElement：必須。需要查找的元素值。
• fromIndex：可選。從該索引處開始查找 searchElement。如果為負(fù)值，則按升序從 array.length + fromIndex 的索引開始搜索。默認(rèn)為 0。

使用方式：

arr.includes(13); // true
arr.includes('abc'); // false
arr.includes(false); // true, 存在false元素

同時，includes() 方法中也存在第 2 個可選參數(shù) fromIndex，fromIndex 的用法與 indexOf() 中的一樣。若 fromIndex 超過數(shù)組的長度，則直接返回-1，若為負(fù)數(shù)，則從最后往前數(shù)幾個索引（arr.length-Math.abs(fromIndex)），然后開始往后搜索。

arr.includes(13, 1); // true, 從索引值1開始往后檢索，可檢索到
arr.includes(13, 5); // false, 從索引值5開始往后檢索，沒檢索到
arr.includes(13, -8); // false, 從最后元素往前數(shù)8個索引，沒檢索到
arr.includes(13, -9); // true, 從最后元素往前數(shù)9個索引，可檢索到

到目前為止，后面的幾種類型，例如 Array, Object, Date 和 Symbol，我們都沒判斷呢。我們現(xiàn)在來判斷下后面的幾個元素：

// 使用indexOf判斷
arr.indexOf(NaN); // -1
arr.indexOf([1, 2]); // -1
arr.indexOf({ a: 123 }); // -1
arr.indexOf(() => Date.now()); // -1
arr.indexOf(new Date('2021/03/04')); // -1
arr.indexOf(new RegExp('abc', 'ig')); // -1
arr.indexOf(Symbol('sym')); // -1
?
// 使用includes判斷
arr.includes(NaN); // false
arr.includes([1, 2]); // false
arr.includes({ a: 123 }); // false
arr.includes(() => Date.now()); // false
arr.includes(new Date('2021/03/04')); // false
arr.includes(new RegExp('abc', 'ig')); // false
arr.includes(Symbol('sym')); // false

結(jié)局很慘，這幾種元素在數(shù)組中都沒有檢索到。可是實際上在數(shù)組中都是真實存在的。

這是因為 indexOf 和 includes 都是采用嚴(yán)格相等的方式（===）來判定的。

NaN === NaN; // false, 兩個NaN永遠(yuǎn)也不會相等
[1, 2] === [1, 2]; // false, 每個聲明出來的數(shù)組都有單獨的存儲地址
{a: 123} === {a: 123}; // false, 同數(shù)組
new Date('2021/03/04')===new Date('2021/03/04'); // false, 看著日期是相同的，但是用new出來的對象進(jìn)行比較的，肯定是不相等的
Symbol('sym')===Symbol('sym'); // Symbol類型的出現(xiàn)就是為了避免沖突創(chuàng)造出來的類型，括號里的屬性僅是為了方便描述而已

針對這些無法被檢索的類型，我們就需要自己寫函數(shù)來判斷特殊的類型了。

3. some

some() 方法用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供）。some() 方法會依次執(zhí)行數(shù)組的每個元素：如果有一個元素滿足條件，則表達(dá)式返回true , 剩余的元素不會再執(zhí)行檢測；如果沒有滿足條件的元素，則返回false。注意：some() 不會對空數(shù)組進(jìn)行檢測，也不會改變原來數(shù)組。

語法：

array.some(function(currentValue,index,arr),thisValue)

參數(shù)說明：

• function(currentValue, index,arr)：必須。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù)。

函數(shù)參數(shù)：

• currentValue：必須。當(dāng)前元素的值。
• index：可選。當(dāng)前元素的索引值。
• arr：可選。當(dāng)前元素屬于的數(shù)組對象。
• thisValue：可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

使用方式：

arr.some((item) => item === false); // true
arr.some((item) => item === undefined); // true
arr.some((item) => typeof item === 'number' && isNaN(item)); // true
arr.some((item) => item === 3); // false, 不存在數(shù)字3
arr.some((item) => {
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // true

4. filter

filter() 方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。filter() 不會對空數(shù)組進(jìn)行檢測，也不會改變原有數(shù)組。

語法：

array.filter(function(currentValue,index,arr),thisValue)

?參數(shù)說明：

• function(currentValue, index,arr)：必須。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù)。

函數(shù)參數(shù)：

• currentValue：必須。當(dāng)前元素的值。
• index：可選。當(dāng)前元素的索引值。
• arr：可選。當(dāng)前元素屬于的數(shù)組對象。
• thisValue：可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

使用方式：

arr.filter((item) => item === false); // [false]
arr.filter((item) => item === undefined); // [undefined]
arr.filter((item) => typeof item === 'number' && isNaN(item)); // [NaN]
arr.filter((item) => item === 13); // [13,13]
arr.filter((item) => item === 3); // []
arr.filter((item) => {
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // [Thu Mar 04 2021 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)]

因此我們可以通過該數(shù)組的長度，來判斷原數(shù)組是否包含我們想要的元素。

5. find

find() 方法返回通過測試（函數(shù)內(nèi)判斷）的數(shù)組的第一個元素的值。find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：當(dāng)數(shù)組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)；如果沒有符合條件的元素返回 undefined。find() 對于空數(shù)組，函數(shù)是不會執(zhí)行的，也不會改變原有數(shù)組。

find()方法無法檢測數(shù)組中的 undefined 元素。因為不存在和存在 undefined 元素，find()方法都會返回 undefined。這里我們就要考慮其他方式了，稍后再講。

語法：

array.find(function(currentValue, index, arr),thisValue)

參數(shù)說明：

• function(currentValue, index,arr)：必須。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù)。

函數(shù)參數(shù)：

• currentValue：必須。當(dāng)前元素的值。
• index：可選。當(dāng)前元素的索引值。
• arr：可選。當(dāng)前元素屬于的數(shù)組對象。
• thisValue：可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。

使用方式：

arr.find((item) => item === 13); // 13, 找到了元素13
arr.find((item) => item === 3); // undefined, 沒找到元素3
arr.find((item) => item === undefined); // undefined, 也不知道是找到了還是沒找到

對于給定數(shù)組的稍微復(fù)雜點的數(shù)據(jù)類型，我們就需要做一些特殊的判斷了。

arr.find((item) => typeof item === 'number' && isNaN(item)); // NaN
?
// array和object類型進(jìn)行比較時，情況很復(fù)雜，因為每個元素的類型都無法確定
// 如果確定都是基本類型，如string, number, boolean, undefined, null等，可以將其轉(zhuǎn)為字符串再比較
// 轉(zhuǎn)字符串的方式也很多，如JSON.stringify(arr), arr.toString(), arr.split('|')等
// 復(fù)雜點的，只能一項一項比較，或者使用遞歸
arr.find((item) => item.toString() === [1, 2].toString()); // [1, 2]
arr.find((item) => JSON.stringify(item) === JSON.stringify({ a: 123 })); // {a: 123}
arr.find((item) => {
 if (typeof item === 'function') {
 return item.toString() === (() => Date.now()).toString();
 }
 return false;
}); // () => Date.now()
arr.find((item) => {
 if (item instanceof Date) {
 return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // Thu Mar 04 2021 00:00:00 GMT+0800
arr.find((item) => {
 if (item instanceof RegExp) {
 return item.toString() === new RegExp('abc', 'ig').toString();
 }
 return false;
}); // /abc/gi
?
// Symbol確實沒法比較，只能比較描述是否一樣
arr.find((item) => {
 if (typeof item === 'symbol') {
 return item.toString() === Symbol('sym').toString();
 }
 return false;
}); // Symbol(sym)

如果還要判斷數(shù)組中是否存在 undefined，我們可以使用findIndex()方法。findIndex() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引。若沒有找到對應(yīng)元素則返回-1。

arr.findIndex((item) => item === undefined); // 3
arr.findIndex((item) => item === 3); // -1, 沒有找到數(shù)字3

其他數(shù)據(jù)格式的判斷，與上面的 find()一樣。

6. 總結(jié)

判斷某個元素是否在數(shù)組中的方式有很多種，我們可以根據(jù)數(shù)組中元素的格式，來選擇更合適的方式。如果都是一些基本類型，建議優(yōu)先選擇使用includes()方法；如果格式比較復(fù)雜的，建議選擇使用some()方法。這兩個方法都是直接返回 boolean 類型，無需更多的轉(zhuǎn)換即可直接使用方法的結(jié)果。

到此這篇關(guān)于JS判斷元素是否存在數(shù)組中的5種方式總結(jié)的文章就介紹到這了,更多相關(guān)JS判斷元素是否存在數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論