JavaScript如何用includes检查数组包含-js教程-PHP中文网

JavaScript如何用includes检查数组包含

畫卷琴夢

发布： 2025-07-10 23:21:02

原创

960人浏览过

includes() 方法能快速判断数组是否包含特定元素，返回布尔值。1. 使用方式简单，直接传入要查找的值即可，如 fruits.includes('banana') 返回 true；2. 支持从指定索引开始查找，如 fruits.includes('apple', 2) 返回 false；3. 可正确识别 nan，numbers.includes(nan) 返回 true；4. 与 indexof() 相比更简洁直观，且处理 nan 更友好；5. 对对象或数组等复杂数据类型仅比较引用，不比较内容，需用 some() 配合自定义函数实现内容匹配；6. 适用于权限判断、表单验证、ui状态切换、数据过滤等场景，代码可读性高且高效便捷。

JavaScript如何用includes检查数组包含

当我们需要快速判断一个数组里有没有某个特定元素时，JavaScript的includes()方法无疑是我的首选。它直接、简洁，返回一个布尔值，让你一眼就知道结果。

解决方案

includes() 方法的工作原理非常直观：你给它一个值，它就去数组里找。找到了，返回 true；没找到，返回 false。它甚至可以接受第二个参数，指定从哪个索引开始搜索，这在某些特定场景下还挺方便的。

const fruits = ['apple', 'banana', 'orange', 'grape'];

// 检查数组是否包含 'banana'
console.log(fruits.includes('banana')); // 输出: true

// 检查数组是否包含 'kiwi'
console.log(fruits.includes('kiwi'));   // 输出: false

// 从索引2（'orange'）开始检查是否包含 'apple'
console.log(fruits.includes('apple', 2)); // 输出: false (因为'apple'在索引0)

// includes() 对 NaN 的处理非常友好，这是 indexOf() 做不到的
const numbers = [1, 2, NaN, 4];
console.log(numbers.includes(NaN)); // 输出: true

登录后复制

includes() 与 indexOf() 有何不同？为何选择 includes()？

我记得以前，要判断数组是否包含某个元素，我们通常会用 indexOf() 方法，然后判断结果是否不等于 -1。比如 arr.indexOf(item) !== -1。这当然能达到目的，但总觉得有点绕，不够直接。includes() 的出现，简直是让代码意图瞬间清晰起来。

立即学习“Java免费学习笔记（深入）”；

它们最核心的区别就在于返回值的类型：indexOf() 返回的是找到元素的第一个索引，如果没找到就返回 -1；而 includes() 直接返回一个 boolean 值 (true 或 false)。这让我们的条件判断语句变得异常简洁。

更关键的一点是，includes() 在处理 NaN（Not-a-Number）时表现得更加“智能”或者说符合直觉。indexOf() 无法找到数组中的 NaN，因为它内部使用的是严格相等 (===)，而 NaN === NaN 的结果是 false。但 includes() 却能正确识别 NaN。对我来说，这一点就足以让我在需要判断包含时优先选择 includes()。

includes() 如何处理复杂数据类型或对象？

这里有个小坑，也是我刚开始用 includes() 时常犯的错误，或者说容易产生误解的地方。includes() 方法在比较时，使用的是严格相等 (===)。这意味着，当你尝试检查数组是否包含一个对象或另一个数组时，它只有在引用的是内存中完全相同的那个对象或数组实例时，才会返回 true。

豆包爱学

豆包旗下AI学习应用

674

查看详情

举个例子：

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const alice = { id: 1, name: 'Alice' };
const bob = users[1]; // 直接引用了数组中的对象

console.log(users.includes(alice)); // 输出: false
// 尽管内容看起来一样，但 'alice' 是一个新的对象，和数组里的不是同一个引用

console.log(users.includes(bob));   // 输出: true
// 'bob' 变量直接引用了 users 数组中的第二个对象，所以是同一个实例

登录后复制

所以，如果你想检查数组里是否包含一个“内容相同”但“引用不同”的对象，includes() 就帮不上忙了。这时候，你可能需要 Array.prototype.some() 方法，结合一个自定义的比较函数来遍历数组，判断对象的某个属性是否匹配。

// 如果要检查内容，而不是引用
const hasAliceContent = users.some(user => user.id === alice.id && user.name === alice.name);
console.log(hasAliceContent); // 输出: true

登录后复制

理解这个引用比较的特性非常重要，能避免很多看似奇怪的 bug。

在实际项目中，何时应该使用 includes()？

includes() 在实际项目中的应用场景非常广泛，只要你的需求是“检查某个值是否存在于一个简单数组中”，它就是最合适的工具。

比如：

权限判断： 用户角色数组 userRoles 中是否包含 admin 权限？userRoles.includes('admin')。
表单验证： 用户输入的标签 tag 是否在预定义的允许标签列表 allowedTags 中？allowedTags.includes(tag)。
UI状态切换： 某个元素是否被选中（假设选中项ID存储在数组中）？selectedItemIds.includes(currentId)。
数据过滤： 快速判断某个 ID 是否在黑名单或白名单数组里。

它最大的优点就是简洁和可读性。对于那些不需要复杂比较逻辑，仅仅是判断元素是否存在的情况，includes() 提供了最直接的语义表达。当然，如果你的数组非常庞大，并且需要进行大量此类操作，你可能需要考虑 Set 数据结构，它的 has() 方法在查找性能上会更有优势，但那又是另一个话题了。对于大多数日常使用场景，includes() 已经足够高效和便利了。

以上就是JavaScript如何用includes检查数组包含的详细内容，更多请关注php中文网其它相关文章！