js includes（超详细）

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

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

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

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

前言

在 JavaScript 开发中，数组和字符串的查找操作是高频需求。例如，我们需要快速判断某个元素是否存在于数组中，或某个子字符串是否存在于长文本中。此时，includes 方法便成为开发者手中的利器。本文将从基础概念、使用场景、进阶技巧、常见误区等维度，深入解析 js includes 的核心原理与实践应用，帮助读者构建系统化的知识框架。

基础概念：什么是 includes？

includes 是 JavaScript 中用于判断值是否存在于数组或字符串中的方法。它返回一个布尔值：

• true：当目标值存在于集合中时。
• false：当目标值不存在时。

核心语法

// 数组的 includes 方法  
array.includes(searchElement, fromIndex);  

// 字符串的 includes 方法  
string.includes(searchString, position);  

参数说明：

1. searchElement 或 searchString：要查找的目标值。
2. fromIndex 或 position（可选）：从指定索引开始搜索。

基础用法：数组与字符串的对比

数组中的 includes

示例 1：基础判断

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

示例 2：指定起始索引

const numbers = [1, 2, 3, 2, 4];  
console.log(numbers.includes(2, 3)); // 从索引3开始搜索，返回 false  

字符串中的 includes

const sentence = "Hello, World!";  
console.log(sentence.includes("World")); // true  
console.log(sentence.includes("world")); // false（大小写敏感）  

核心特性：类型敏感与浅比较

includes 的行为遵循 严格相等（===） 的比较原则，这意味着：

1. 类型必须一致：例如，[1].includes("1") 返回 false。
2. 浅层比较：对于对象或数组，比较的是引用地址而非内容。

示例：类型敏感问题

const arr = [1, "2", null];  
console.log(arr.includes(1));      // true  
console.log(arr.includes("1"));    // false（类型不同）  
console.log(arr.includes(null));   // true  

进阶技巧：如何高效使用 includes？

场景 1：简化条件判断

// 传统写法（使用 indexOf）  
if (fruits.indexOf("apple") !== -1) {  
  // 处理逻辑  
}  

// 使用 includes 的简洁写法  
if (fruits.includes("apple")) {  
  // 处理逻辑  
}  

场景 2：结合其他方法链式调用

// 过滤数组并判断是否存在特定元素  
const filtered = [1, 2, 3, 4].filter(num => num > 2);  
if (filtered.includes(3)) {  
  console.log("包含目标值");  
}  

常见误区与解决方案

误区 1：对 NaN 的误判

由于 NaN !== NaN，includes 无法直接检测到数组中的 NaN。

const arr = [NaN];  
console.log(arr.includes(NaN)); // false（预期 true）  

解决方案：使用 Number.isNaN 进行判断：

function hasNaN(arr) {  
  return arr.some(element => Number.isNaN(element));  
}  

误区 2：对象引用比较问题

const obj = { name: "Alice" };  
const arr = [obj];  
console.log(arr.includes({ name: "Alice" })); // false（新对象的引用不同）  

解决方案：改用 some 方法结合属性比较：

const target = { name: "Alice" };  
const hasTarget = arr.some(item =>  
  item.name === target.name && item.age === target.age  
);  

与其他方法的对比：includes vs indexOf vs some

使用场景选择：

• 简单存在性判断：优先使用 includes（代码更易读）。
• 需获取索引信息：选择 indexOf。
• 复杂条件判断：使用 some 或 find。

性能优化：在大规模数据中的表现

includes 方法的底层实现与 indexOf 类似，时间复杂度均为 O(n)。对于超大规模数组（如百万级数据），需结合以下策略优化：

1. 提前终止条件：通过 break 或 return 语句尽早跳出循环。
2. 数据结构转换：将数组转换为对象或 Map 结构，实现 O(1) 时间复杂度的查找。

示例：使用 Set 优化

const largeArray = Array.from({ length: 1e6 }, (_, i) => i);  
const set = new Set(largeArray);  

// 传统 includes 方法  
console.time("includes");  
largeArray.includes(999999); // 需遍历完整个数组  
console.timeEnd("includes");  

// 使用 Set 的优化  
console.time("Set");  
set.has(999999); // O(1) 时间复杂度  
console.timeEnd("Set");  

实战案例：用户权限验证

假设需要验证用户是否拥有某个权限：

const userPermissions = ["read", "write", "delete"];  

function hasPermission(permission) {  
  return userPermissions.includes(permission);  
}  

// 调用示例  
if (hasPermission("edit")) {  
  // 允许编辑操作  
} else {  
  console.log("权限不足");  
}  

结论

includes 方法凭借其简洁的语法和直观的语义，在 JavaScript 开发中扮演着重要角色。通过掌握其类型敏感特性、与同类方法的对比，以及常见问题的解决方案，开发者可以更高效地处理数组和字符串的查找需求。在实际项目中，结合 includes 与其他工具方法（如 some、Set），能够显著提升代码的可读性和性能表现。

掌握 js includes 不仅是语法层面的积累，更是理解 JavaScript 核心逻辑的窗口。希望本文能帮助读者建立系统化的认知框架，为后续学习更复杂的数据操作打下坚实基础。