JS includes 是什么？怎么用？一文带你了解

在 JavaScript 的世界里，`includes` 是一个非常实用的数组方法，它的主要作用是判断一个数组是否包含某个特定的元素，那它具体是怎么用的呢？下面我们来详细探讨。

基本用法

假设有一个数组 `const arr = [1, 2, 3, 4, 5];`，我们想知道数组里是否有 `3`，就可以这样写：`arr.includes(3);`，这时候它会返回 `true`，因为数组 `arr` 中确实存在 `3` 这个元素，如果我们检查一个不存在的元素，`arr.includes(6);`，它就会返回 `false`，这就是 `includes` 最基本的用法，简单直接地判断元素是否在数组中。

与其他方法的区别

与 indexOf 的区别

`indexOf` 也是用于检查数组中是否存在某个元素，不过它返回的是元素的索引值，如果不存在则返回 `-1`，`arr.indexOf(3);` 会返回 `2`（因为索引从 `0` 开始），而 `arr.indexOf(6);` 返回 `-1`，而 `includes` 更侧重于返回布尔值（`true` 或 `false`）来表示是否包含，在语义上，`includes` 更直观地表达了“是否包含”的意思，在一些只需要判断是否存在的场景下，使用 `includes` 会让代码更易读。

与 find 的区别

`find` 方法是用于找出数组中符合条件的第一个元素，`const arr = [ { id: 1, name: '张三' }, { id: 2, name: '李四' } ];`，如果我们想找 `id` 为 `2` 的元素，可以用 `arr.find(item => item.id === 2);`，它会返回 `{ id: 2, name: '李四' }`，而 `includes` 主要针对简单元素的存在判断，对于对象等复杂数据结构，`includes` 比较的是引用（除非对象是完全相同的引用），而 `find` 可以根据自定义条件查找。

在实际项目中的应用场景

表单验证

在前端开发中,经常会有表单验证的需求，比如有一个下拉框，用户选择的选项必须是规定好的几个值之一，假设规定的选项数组是 `const validOptions = ['选项1', '选项2', '选项3'];`，当用户提交表单时，我们可以用 `validOptions.includes(userSelectedOption)` 来判断用户选择的 `userSelectedOption` 是否是有效选项，如果返回 `false`，就提示用户选择无效。

数据过滤

在处理数据列表时,有时候我们需要过滤掉一些不需要的内容，比如有一个文章标签数组 `const articleTags = ['科技', '娱乐', '体育', '财经'];`，我们只想展示包含特定标签（'科技'）的文章，可以先获取所有文章数据，然后遍历文章，对于每篇文章的标签数组，用 `article.tags.includes('科技')` 来判断是否要展示这篇文章。

权限控制

在一些后台管理系统中,会涉及到权限控制，比如有一个用户权限数组 `const userPermissions = ['查看', '编辑', '删除'];`，当用户点击某个操作按钮（删除”按钮）时，用 `userPermissions.includes('删除')` 来判断用户是否有该权限，如果返回 `true`，则允许操作；否则，禁用按钮或提示无权限。

注意事项

数据类型的一致性

`includes` 进行比较时，要求数据类型一致，`const numArr = [1];`，`numArr.includes('1');` 会返回 `false`，因为一个是数字 `1`，一个是字符串 `'1'`，在使用时要确保被查找的元素和数组中的元素类型相符。

对 NaN 的处理

在 JavaScript 中，`NaN` 是一个特殊的值，`NaN === NaN` 会返回 `false`，`[NaN].includes(NaN);` 会返回 `true`，这是 `includes` 比较特别的一点，它能正确判断数组中是否包含 `NaN`，而如果用 `indexOf`，`[NaN].indexOf(NaN);` 会返回 `-1`。

`JS includes` 是一个简洁而强大的数组方法，它在判断数组元素是否存在的场景中发挥着重要作用，通过与其他类似方法（如 `indexOf`、`find`）的对比，我们能更清楚它的特点和适用场景，在实际项目中，从表单验证到数据过滤、权限控制等方面都有它的用武之地，但使用时也要注意数据类型一致性和对 `NaN` 的特殊处理，掌握好 `includes`，能让我们的 JavaScript 代码在处理数组元素包含关系时更加高效和准确。