溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JS判斷元素是否存在數組中的方法有哪些”，在日常操作中，相信很多人在JS判斷元素是否存在數組中的方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS判斷元素是否存在數組中的方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
在前端開發中， 經常會遇到需要判斷某個元素是否存在于數組中的場景。其實判斷方法有很多種，今天就跟大家來一起一個一個的了解下。
先來定義一個數組：
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'),
];在這個數組中，我們包含了好幾種類型：number, boolean, string, undefined, null, array, object, Date, Symbol 等。其中數字 13 出現了 2 次。
接下來我們來看下具體實現的方法。
我們最熟悉的就是indexOf()了，畢竟他出現的早，兼容性也好，使用起來也很方便。
語法：
array.indexOf(item,start)
參數說明：
item：必需。要查找的元素。
start：可選的整數參數。規定在數組中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字符串的首字符開始檢索。
使用方式：
只要判斷返回的數據是不是-1，就能知道數組中是否包含該元素。
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
語法：
array.lastIndexOf(item,start)
參數說明：
item：必需。要查找的元素。
start：可選的整數參數。規定在數組中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字符串的首字符開始檢索。
使用方式同indexOf。
indexOf 和 lastIndexOf 還有第 2 個可選參數 start，用來表示從哪個索引開始進行搜索。
在 indexOf 中，若 start超過數組的長度，則直接返回-1，若為負數，則從最后往前數幾個索引（arr.length-Math.abs(start)），然后開始往后搜索。
在 lastIndexOf 中，若 start達到或超過數組的長度，則搜索整個數組；若為負數，則從最后往前數幾個索引（arr.length-Math.abs(start)），然后開始往前搜索，若負數的絕對值超過了數組的長度，則直接返回-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)開始往前搜索
includes() 方法用來判斷一個數組是否包含一個指定的值，如果是返回 true，否則false。
語法：
array.includes(searchElement, fromIndex)
參數說明：
searchElement：必須。需要查找的元素值。
fromIndex：可選。從該索引處開始查找 searchElement。如果為負值，則按升序從 array.length + fromIndex 的索引開始搜索。默認為 0。
使用方式：
arr.includes(13); // true
arr.includes('abc'); // false
arr.includes(false); // true, 存在false元素同時，includes() 方法中也存在第 2 個可選參數 fromIndex，fromIndex 的用法與 indexOf() 中的一樣。若 fromIndex 超過數組的長度，則直接返回-1，若為負數，則從最后往前數幾個索引（arr.length-Math.abs(fromIndex)），然后開始往后搜索。
arr.includes(13, 1); // true, 從索引值1開始往后檢索，可檢索到 arr.includes(13, 5); // false, 從索引值5開始往后檢索，沒檢索到 arr.includes(13, -8); // false, 從最后元素往前數8個索引，沒檢索到 arr.includes(13, -9); // true, 從最后元素往前數9個索引，可檢索到
到目前為止，后面的幾種類型，例如 Array, Object, Date 和 Symbol，我們都沒判斷呢。我們現在來判斷下后面的幾個元素：
// 使用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結局很慘，這幾種元素在數組中都沒有檢索到。可是實際上在數組中都是真實存在的。
這是因為 indexOf 和 includes 都是采用嚴格相等的方式（===）來判定的。
NaN === NaN; // false, 兩個NaN永遠也不會相等
[1, 2] === [1, 2]; // false, 每個聲明出來的數組都有單獨的存儲地址
{a: 123} === {a: 123}; // false, 同數組
new Date('2021/03/04')===new Date('2021/03/04'); // false, 看著日期是相同的，但是用new出來的對象進行比較的，肯定是不相等的
Symbol('sym')===Symbol('sym'); // Symbol類型的出現就是為了避免沖突創造出來的類型，括號里的屬性僅是為了方便描述而已針對這些無法被檢索的類型，我們就需要自己寫函數來判斷特殊的類型了。
some() 方法用于檢測數組中的元素是否滿足指定條件（函數提供）。some() 方法會依次執行數組的每個元素：如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執行檢測；如果沒有滿足條件的元素，則返回false。注意：some() 不會對空數組進行檢測，也不會改變原來數組。
語法：
array.some(function(currentValue,index,arr),thisValue)
參數說明：
function(currentValue, index,arr)：必須。函數，數組中的每個元素都會執行這個函數。
函數參數：
currentValue：必須。當前元素的值。
index：可選。當前元素的索引值。
arr：可選。當前元素屬于的數組對象。
thisValue：可選。對象作為該執行回調時使用，傳遞給函數，用作 "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, 不存在數字3
arr.some((item) => {
if (item instanceof Date) {
return item.toString() === new Date('2021/03/04').toString();
}
return false;
}); // truefilter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。filter() 不會對空數組進行檢測，也不會改變原有數組。
語法：
array.filter(function(currentValue,index,arr),thisValue)
參數說明：
function(currentValue, index,arr)：必須。函數，數組中的每個元素都會執行這個函數。
函數參數：
currentValue：必須。當前元素的值。
index：可選。當前元素的索引值。
arr：可選。當前元素屬于的數組對象。
thisValue：可選。對象作為該執行回調時使用，傳遞給函數，用作 "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 (中國標準時間)]因此我們可以通過該數組的長度，來判斷原數組是否包含我們想要的元素。
find() 方法返回通過測試（函數內判斷）的數組的第一個元素的值。find() 方法為數組中的每個元素都調用一次函數執行：當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調用執行函數；如果沒有符合條件的元素返回 undefined。find() 對于空數組，函數是不會執行的，也不會改變原有數組。
find()方法無法檢測數組中的 undefined 元素。因為不存在和存在 undefined 元素，find()方法都會返回 undefined。這里我們就要考慮其他方式了，稍后再講。
語法：
array.find(function(currentValue, index, arr),thisValue)
參數說明：
function(currentValue, index,arr)：必須。函數，數組中的每個元素都會執行這個函數。
函數參數：
currentValue：必須。當前元素的值。
index：可選。當前元素的索引值。
arr：可選。當前元素屬于的數組對象。
thisValue：可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。
使用方式：
arr.find((item) => item === 13); // 13, 找到了元素13 arr.find((item) => item === 3); // undefined, 沒找到元素3 arr.find((item) => item === undefined); // undefined, 也不知道是找到了還是沒找到
對于給定數組的稍微復雜點的數據類型，我們就需要做一些特殊的判斷了。
arr.find((item) => typeof item === 'number' && isNaN(item)); // NaN
// array和object類型進行比較時，情況很復雜，因為每個元素的類型都無法確定
// 如果確定都是基本類型，如string, number, boolean, undefined, null等，可以將其轉為字符串再比較
// 轉字符串的方式也很多，如JSON.stringify(arr), arr.toString(), arr.split('|')等
// 復雜點的，只能一項一項比較，或者使用遞歸
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)如果還要判斷數組中是否存在 undefined，我們可以使用findIndex()方法。findIndex() 方法返回數組中滿足提供的測試函數的第一個元素的索引。若沒有找到對應元素則返回-1。
arr.findIndex((item) => item === undefined); // 3 arr.findIndex((item) => item === 3); // -1, 沒有找到數字3
其他數據格式的判斷，與上面的 find()一樣。
到此，關于“JS判斷元素是否存在數組中的方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
