在 JavaScript 中檢查數組是否包含值的 5 種方法
在 JavaScript 中，有多種方法可以檢查數組是否包含項目。您始終可以使用 for 循環或 Array.indexOf() 方法，但是 ES6 添加了很多更有用的方法來搜索數組並輕鬆找到您要查找的內容。
indexOf() 方法
檢查數組中是否存在項目的最簡單和最快的方法是使用 Array.indexOf() 方法。此方法在數組中搜索給定項目並返回其索引。如果沒有找到項目，則返回-1。
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
fruits.indexOf('🍋'); // 1 (true)
fruits.indexOf('🍍'); // 4 (true)
fruits.indexOf('🍌'); // -1 (false)
默認情況下，indexOf() 方法從數組的開頭開始搜索，並在數組的末尾停止。但是你可以傳入一個位置作為第二個參數來跳過要包含在搜索中的起始元素：
fruits.indexOf('🍋', 1); // 1 (true)
fruits.indexOf('🍋', 4); // -1 (false)
請注意，如果該項目不止一次出現，indexOf() 方法返回第一次出現的位置。
JavaScript 為我們提供了一個替代數組方法，稱為 lastIndexOf() .顧名思義，它返回數組中項目最後一次出現的位置。 lastIndexOf() 從數組末尾開始搜索並在數組開頭停止。您還可以指定第二個參數以在末尾排除項目。
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
fruits.lastIndexOf('🍇'); // 3 (true)
fruits.lastIndexOf('🍉'); // -1 (true)
fruits.lastIndexOf('🍋', 4); // 1 (false)
indexOf() 和 lastIndexOf() 執行區分大小寫的搜索並在所有瀏覽器中工作，包括 IE9 及更高版本。
includes() 方法
includes 方法是 ES6 的一部分，也可用於確定數組是否包含指定項。此方法返回 true 如果元素存在於數組中，並且 false 如果不。 includes() 方法非常適合作為簡單的布爾值來查找元素是否存在。
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
fruits.includes('🍇'); // true
fruits.includes('🍉'); // false
默認情況下，includes() 方法搜索整個數組。但是你也可以傳入一個起始索引作為第二個參數來從不同的位置開始搜索：
fruits.includes('🍐', 4); // true
fruits.includes('🍊', 4); // false
除了字符串，includes() 方法也適用於其他原始類型：
const symbol = Symbol('🌟');
const types = ['Apple', 150, null, undefined, true, 29n, symbol];
// strings
types.includes('Apple'); // true
// numbers
types.includes(150); // true
// null
types.includes(null); // true
// undefined
types.includes(undefined); // true
// boolean
types.includes(true); // true
// BigInt
types.includes(29n); // true
// Symbol
types.includes(symbol); // true
includes() 和 indexOf() NaN 的行為不同 ("Not-a-Number") 屬性：
const arr = [NaN];
// ✅
arr.includes(NaN) // true
// ❌
arr.indexOf(NaN) // -1
incudes() 該方法在 IE 中不起作用，只能在現代瀏覽器中使用。
find() 方法
不同於 includes() , find() 方法為數組中存在的每個元素執行指定的函數。它返回數組中第一個滿足特定條件的元素的值：
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
const value = fruits.find(elem => elem === '🍍');
console.log(value); // 🍍
如果沒有找到函數返回 true 的元素 , find() 方法返回一個 undefined 價值：
const value = fruits.find(elem => elem === '🍉');
console.log(value); // undefined
您還可以獲取當前元素的索引作為函數的第二個參數。當您也想比較索引時，這很有用：
fruits.find((elem, idx) => elem === '🍇' && idx > 2); // 🍇
fruits.find((elem, idx) => elem === '🍋' && idx > 2); // undefined
find() 的另一個好處 方法是它也適用於對像等其他數據類型：
const animals = [{ name: '🐱' }, { name: '🐒' }, { whale: '🐋' }];
const found = animals.find(elem => elem.name === '🐒');
console.log(found); // { name: '🐒' }
find() 該方法僅適用於現代瀏覽器。
some() 方法
some() 方法的工作原理與 find() 非常相似 除了它返回一個布爾值 true 如果元素在數組中找到，否則 false .
const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
fruits.some(elem => elem === '🍐'); // true
fruits.some(elem => elem === '🍓'); // false
some() 方法也可以與數組和對像一起使用：
const animals = [{ name: '🐱' }, { name: '🐒' }, { whale: '🐋' }];
animals.some(elem => elem.name === '🐒'); // true
animals.some(elem => elem.name === '🍊'); // false
您可以使用 some() 所有現代瀏覽器中的方法，以及在 IE9 及更高版本中。
every() 方法
every() 方法類似於 some() 除了它確保數組中的所有元素都通過某個條件：
const numbers = [10, 99, 75, 45, 33];
// check if all elements are > 15
const result = numbers.every(num => num > 15);
console.log(result); // false
就像 some() , every() 適用於所有現代瀏覽器，以及 IE9 及更高版本。
不區分大小寫的搜索
indexOf() 和 includes() 方法區分大小寫。這意味著您必須指定相同的大小寫字符串來搜索數組：
const names = ['Ali', 'Atta', 'Alex', 'John'];
names.indexOf('atta'); // -1
names.includes('atta'); // false
要執行不區分大小寫的搜索，一種方法是使用 map() 方法將數組中的每個字符串轉換為小寫，然後執行搜索：
const names = ['Ali', 'Atta', 'Alex', 'John'];
names.map(elem => elem.toLowerCase()).indexOf('atta'); // 1
names.map(elem => elem.toLowerCase()).includes('atta'); // true
或者，您可以使用 some() 一步完成字符串小寫和比較的方法：
names.some(elem => elem.toLowerCase() === 'atta'); // true
結論
在本文中，我們研究了 5 種不同的 JavaScript Array 的方法來檢查一個項目是否存在於數組中。
您可能會問一個合理的問題，為什麼我們首先需要所有這些方法？為什麼不只有一種方法來搜索數組？
一個簡單的答案是所有這些方法都適用於不同的用例：
- 想知道數組中元素的位置嗎？使用
indexOf()方法。 - 想要找到元素最後一次出現的位置？有一個
lastIndexOf()可用於此目的的方法。 - 你只想知道元素是否存在嗎？使用
includes()方法。 - 你也想得到匹配的元素嗎？使用
find()方法。 - 使用對像數組？使用
some()檢查匹配元素是否存在的方法。 - 想要執行不區分大小寫的搜索？使用
find()或some()方法。 - 想要檢查數組中的所有元素是否滿足某個條件？使用
every()方法。 - 等等。
要詳細了解 JavaScript 數組以及如何使用它們將多條信息存儲在一個變量中，請查看這篇文章。
