JavaScript-检查数组是否包含某个元素的方法

在 JavaScript 中（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)

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（“不是一个数字”）属性：

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); // 🍍

注意：在上面的例子中，我使用了一个箭头函数来循环元素。箭头函数是 ES6 的一部分。

如果在函数返回的位置找不到元素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.
find()方法还有另一个好处是它也适用于其他数据类型，如对象：

const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐'];
 
fruits.some(elem => elem === '🍐');     // true
fruits.some(elem => elem === '🍓');     // false

some()方法还可以与数组和对象一起使用：
find()方法还有另一个好处是它也适用于其他数据类型，如对象：

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()方法是区分大小写的。这意味着必须指定相同的 case 字符串来搜索数组：

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

总结

• 想知道数组中的元素位置吗？使用indexOf()方法。
• 想要找到元素最后一次出现的位置？使用lastIndexOf()方法。
• 只想知道元素是否存在？使用includes()方法。
• 想要找到匹配的元素？使用find()方法。
• 对象数组想要找到匹配的元素？使用some()方法。
• 想要执行不区分大小写的搜索？用途find()或some()方法。
• 想要检查数组中的所有元素是否都满足某个条件？使用every()方法。