includes js（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，处理数组和字符串的常见需求之一是“判断某个元素或子字符串是否存在”。includes() 方法作为 ES7 引入的核心工具，因其简洁直观的语法，成为开发者高频使用的功能之一。无论是验证用户输入、过滤数据，还是构建复杂的应用逻辑，includes js 的应用都贯穿于开发的各个阶段。本文将从基础语法到高级技巧，结合实际案例，帮助读者全面掌握这一方法的使用场景与最佳实践。

一、includes() 方法的基础用法

1.1 数组的 includes() 方法

includes() 是 JavaScript 数组和字符串的原生方法，用于判断某个值是否存在于数组或字符串中，并返回布尔值（true 或 false）。其语法如下：

array.includes(valueToFind, fromIndex);  
string.includes(searchString, position);  

• 参数说明：
  • valueToFind：要查找的值。
  • fromIndex（可选）：开始查找的索引位置，默认为 0。

示例 1：基础用法

const fruits = ["apple", "banana", "orange"];  
console.log(fruits.includes("banana")); // true  
console.log(fruits.includes("grape")); // false  

示例 2：字符串的 includes()

const sentence = "Hello World!";  
console.log(sentence.includes("World")); // true  
console.log(sentence.includes("hello")); // false（区分大小写）  

1.2 与 indexOf() 的对比

在 includes() 出现之前，开发者通常使用 indexOf() 来判断元素是否存在。两者的区别如下：
| 方法 | 返回值类型 | 语法简洁性 | 处理 NaN 的能力 |
|--------------|------------------|------------|-------------------|
| includes() | boolean | 更简洁 | 能正确判断 NaN |
| indexOf() | 索引值（number）| 需额外判断 | 无法判断 NaN |

示例：判断 NaN 的存在

const arr = [1, 2, NaN];  
console.log(arr.includes(NaN)); // true  
console.log(arr.indexOf(NaN) !== -1); // false（因为 NaN !== NaN）  

二、进阶用法与场景应用

2.1 结合条件语句进行逻辑判断

在表单验证、权限控制等场景中，includes() 可直接嵌入条件语句中，提升代码的可读性。

案例：邮箱验证

function isValidEmail(email) {  
  const allowedDomains = ["gmail.com", "example.com", "outlook.com"];  
  const domain = email.split("@")[1];  
  return allowedDomains.includes(domain);  
}  
console.log(isValidEmail("user@example.com")); // true  

2.2 处理复杂数据结构

当数组元素是对象或嵌套结构时，需结合其他方法（如 map() 或 JSON.stringify()）实现深度判断。

案例：对象数组的判断

const users = [  
  { id: 1, name: "Alice" },  
  { id: 2, name: "Bob" }  
];  
// 直接判断对象（失败）  
console.log(users.includes({ id: 1, name: "Alice" })); // false（对象引用不同）  
// 通过 `JSON.stringify` 转换后比较  
const targetUser = JSON.stringify({ id: 1, name: "Alice" });  
const found = users.some(user =>  
  JSON.stringify(user) === targetUser  
);  
console.log(found); // true  

2.3 字符串的模糊匹配与子串查找

在需要模糊匹配或检查子串时，includes() 可替代正则表达式，简化代码逻辑。

案例：文件格式验证

function validateFileExtension(fileName) {  
  const validExtensions = [".jpg", ".png", ".pdf"];  
  return validExtensions.some(ext => fileName.includes(ext));  
}  
console.log(validateFileExtension("report.pdf")); // true  

三、性能优化与注意事项

3.1 处理大数组的性能

对于超大数据集（如包含数万条记录的数组），includes() 的时间复杂度为 O(n)，可能影响性能。此时可考虑以下优化方法：

• 使用 Set 结构：

  const largeArray = new Array(10000).fill().map((_, i) => i);  
  const searchValue = 9999;  
  const set = new Set(largeArray);  
  console.log(set.has(searchValue)); // 更快的 O(1) 时间复杂度  
  

• 提前终止条件：
  若需在特定范围内查找，可结合 fromIndex 参数减少遍历范围。

3.2 值的类型敏感性

includes() 对类型敏感，例如 3 和 "3" 会被视为不同值。开发者需注意数据类型的统一。

示例：类型差异导致的错误

const numbers = [1, 2, 3];  
console.log(numbers.includes("3")); // false  

3.3 兼容性问题

虽然现代浏览器和 Node.js 环境已全面支持 includes()，但在处理老旧系统时，可通过 Polyfill 实现兼容：

if (!Array.prototype.includes) {  
  Object.defineProperty(Array.prototype, "includes", {  
    value: function(searchElement, fromIndex = 0) {  
      // 实现逻辑...  
    }  
  });  
}  

四、常见问题与解决方案

4.1 如何判断多个值是否存在？

使用 Array.some() 或多次调用 includes()：

const arr = [10, 20, 30];  
// 方法 1：直接判断  
console.log(arr.includes(10) || arr.includes(40)); // true  
// 方法 2：使用 `some()`  
console.log([10, 40].some(value => arr.includes(value))); // true  

4.2 如何结合 includes() 过滤数组？

通过 filter() 方法结合 includes() 实现数据筛选：

const allItems = ["apple", "banana", "orange", "grape"];  
const excludedItems = ["banana", "grape"];  
const filteredItems = allItems.filter(item =>  
  !excludedItems.includes(item)  
);  
console.log(filteredItems); // ["apple", "orange"]  

4.3 如何处理 undefined 或 null 的边界情况？

需明确判断 undefined 是否为目标值，避免逻辑错误：

const arr = [undefined, null, 0];  
console.log(arr.includes(undefined)); // true  
console.log(arr.includes(null)); // true  

结论

includes js 作为 JavaScript 的核心方法，凭借其简洁的语法和直观的逻辑，成为开发者处理数据存在性判断的首选工具。从基础的数组元素查找，到复杂对象的深度比较，再到性能优化和兼容性处理，掌握其用法能显著提升代码的可读性和效率。随着实践的深入，开发者还可结合 some()、find() 等方法，构建更灵活的解决方案。希望本文能帮助读者在实际项目中更好地应用 includes js，进一步优化开发流程。

（全文约 1800 字）