JavaScript 中检查数组是否包含值的 5 种方法

2023-12-11 16:29| 来源: 网络整理| 查看: 265

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

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.

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()方法是区分大小写的。这意味着您必须指定相同的 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 结论

在本文中，我们研究了 5 种不同的 JavaScriptArray方法来检查数组中是否存在项目。

您可能会问一个合理的问题，为什么我们首先需要所有这些方法？为什么不只有一种方法来搜索数组呢？

一个简单的答案是，所有这些方法都适用于不同的用例：

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

要了解有关 JavaScript 数组以及如何使用它们在一个变量中存储多条信息的更多信息，请查看本文。

【本文地址】

公司简介

联系我们