异常教程

JavaScript includes() 方法（超详细）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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() 方法作为 ES6 引入的数组实例方法，凭借其直观的语法和高效的功能，迅速成为开发者处理数组包含性判断的首选工具。本文将通过循序渐进的方式，从语法基础到进阶技巧，结合生动的比喻和实际案例，帮助读者全面掌握这一方法的核心逻辑与应用场景。

基础语法与核心功能

1. 方法定义与基本用法

includes() 方法用于判断数组是否包含某个指定元素，返回一个布尔值（true 或 false）。其语法结构如下：

array.includes(element, [fromIndex])

其中：

  • element：必选参数，要检测的元素。
  • fromIndex：可选参数，指定从数组的哪个索引位置开始搜索，默认从数组开头（索引0）开始。

示例1：基础判断

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

示例2：从指定位置开始搜索

const numbers = [10, 20, 30, 40, 50];  
console.log(numbers.includes(30, 2)); // true（从索引2开始查找）  
console.log(numbers.includes(10, 1)); // false（从索引1开始查找）

2. 类型敏感性与严格匹配

includes() 方法采用严格相等（===）进行元素匹配，这意味着它会同时比较值和类型。例如：

const mixedArray = [5, "5", null, undefined];  
console.log(mixedArray.includes(5));        // true  
console.log(mixedArray.includes("5"));     // true  
console.log(mixedArray.includes(5, 1));     // false（从索引1开始查找）  
console.log(mixedArray.includes(5 === "5")); // false（因为5和"5"类型不同）

比喻：
可以将 includes() 想象成一位“严格考官”——它不仅检查元素的“身份信息”（值），还严格核对“证件类型”（数据类型），只有两者完全一致时才会通过审核。

与 indexOf() 方法的对比分析

1. 功能相似性与核心差异

indexOf() 方法同样是检测元素是否存在于数组中，但它返回元素的索引位置（若不存在则返回 -1）。两者的对比表格如下：

特性includes()indexOf()
返回值类型布尔值（true/false）数值（元素索引或 -1）
对 NaN 的处理可正确判断 NaN无法区分 NaN 和不存在元素
简洁性更直观，适合存在性判断需要额外判断返回值是否为 -1

示例：处理 NaN 的场景

const arr = [NaN, 1, 2, 3];  
console.log(arr.includes(NaN));     // true  
console.log(arr.indexOf(NaN));      // -1（错误判断）

关键点：
includes() 通过内部实现规避了 NaN === NaN 的问题，而 indexOf() 则无法正确处理这种情况。

进阶用法与注意事项

1. 处理复杂数据结构

（1）嵌套数组与对象的判断

直接使用 includes() 可能无法检测嵌套元素，此时需要结合其他方法：

const users = [  
  { name: "Alice", age: 30 },  
  { name: "Bob", age: 25 }  
];  
// 直接判断对象引用（通常不适用）  
console.log(users.includes({ name: "Alice", age: 30 })); // false（新对象地址不同）  
// 改用 find() 或自定义条件  
const foundUser = users.find(user => user.name === "Alice");  
console.log(!!foundUser); // true

技巧：
对于复杂对象，建议通过 find() 方法结合条件表达式实现精准匹配。

（2）多维数组的扁平化处理

使用 flat() 方法将多维数组转换为一维数组后再调用 includes()：

const matrix = [[1, 2], [3, 4], [5, 6]];  
console.log(matrix.includes(3));       // false（未展开）  
console.log(matrix.flat().includes(3)); // true

2. 性能与可维护性优化

  • 避免不必要的嵌套调用： 
    // 低效写法  
if (arr.includes(value) === true) { ... }  
// 优化写法  
if (arr.includes(value)) { ... }
  • 结合条件判断链式调用： 
    const handleSearch = (array, target) => {  
  return array.includes(target) ? "Found!" : "Not Found!";  
};

常见误区与解决方案

1. 类型不匹配导致的误判

案例：

const scores = [85, 90, "95"];  
console.log(scores.includes(95)); // false（因为存在字符串类型"95"）

解决方法：
在比较前统一元素类型：

console.log(scores.includes(95) || scores.includes(String(95))); // true

2. 稀疏数组与特殊对象的处理

对于稀疏数组或通过 Object.create() 创建的特殊数组对象，includes() 可能无法正常工作。此时需先通过 Array.from() 或扩展运算符 [...array] 转换为标准数组：

const sparseArr = [1, , 3]; // 第二个元素未定义  
console.log(sparseArr.includes(undefined)); // false（未定义元素不被视为元素）  
// 转换为稠密数组  
const denseArr = [...sparseArr];  
console.log(denseArr); // [1, undefined, 3]  
console.log(denseArr.includes(undefined)); // true

实战案例：综合应用场景

案例1：表单输入验证

在用户输入手机号时，可利用 includes() 快速验证是否包含非法字符：

const forbiddenChars = ["!", "@", "#", "$", "%"];  
function validatePhone(input) {  
  return !forbiddenChars.includes(...input); // 或使用 some() 方法  
}

案例2：权限控制与路由跳转

在前端路由中判断用户角色权限：

const userRoles = ["admin", "editor"];  
const requiredRole = "admin";  
if (userRoles.includes(requiredRole)) {  
  router.push("/dashboard");  
} else {  
  router.push("/403");  
}

案例3：动态数据过滤

结合 filter() 方法筛选符合多个条件的元素：

const products = [  
  { id: 1, category: "electronics", price: 200 },  
  { id: 2, category: "books", price: 30 },  
  { id: 3, category: "electronics", price: 150 }  
];  
const targetCategories = ["electronics"];  
const filtered = products.filter(  
  product => targetCategories.includes(product.category)  
);

结论：掌握核心，灵活应用

通过本文的系统讲解，我们深入理解了 includes() 方法的语法逻辑、与同类方法的差异、进阶用法及常见陷阱。这一方法不仅是数组操作的基础工具，更能在实际开发中显著提升代码的可读性和效率。建议读者通过以下步骤巩固知识：

  1. 基础练习：编写包含不同类型元素的数组，练习 includes() 的基本用法。
  2. 对比实验：用 indexOf() 和 includes() 解决相同问题，观察结果差异。
  3. 实战项目：在表单验证、数据过滤等场景中尝试使用该方法。

随着对 includes() 方法的熟练掌握，开发者将能够更高效地处理复杂数据逻辑，进一步提升 JavaScript 开发的实战能力。

最新发布

查看更多文章