JavaScript Array 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 开发中，数组的遍历和元素查找是日常操作中的高频场景。例如，验证用户输入是否合法、检查权限列表是否存在特定角色、过滤数据集合等场景，都可能需要快速判断某个值是否存在于数组中。此时，JavaScript Array includes() 方法 就像一把精准的钥匙，能快速打开问题的解决方案之门。本文将从基础到进阶，结合生动的比喻和代码示例，带读者全面理解这一方法的使用场景、核心特性以及常见误区。

一、什么是 JavaScript Array includes() 方法？

includes() 是 JavaScript 数组原型上的一个方法，用于判断数组是否包含指定的元素。如果存在，则返回 true；否则返回 false。它的作用类似于“在书架上寻找一本书是否存在”，但更高效且直观。

基本语法

array.includes(valueToFind, fromIndex)  

• valueToFind：必选参数，要查找的元素值。
• fromIndex：可选参数，指定从数组的哪个索引位置开始查找，默认为 0。

示例：基础用法

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

比喻：假设数组是图书馆的书架，includes() 就像图书管理员快速扫描书架，确认某本书是否存在。

二、与 indexOf() 方法的对比

在 includes() 出现之前，开发者通常使用 indexOf() 方法来判断元素是否存在。两者的区别如下：

代码示例：

// 使用 indexOf()  
const numbers = [1, 2, 3, NaN];  
console.log(numbers.indexOf(3) !== -1); // true  
console.log(numbers.indexOf(NaN) !== -1); // false（意外结果！）  

// 使用 includes()  
console.log(numbers.includes(NaN)); // true  

结论：includes() 在可读性和对 NaN 的处理上更具优势，推荐优先使用。

三、深入理解参数 fromIndex

fromIndex 参数允许开发者指定从数组的某个位置开始查找。这一特性类似于“从书架的中间层开始找书”，而非从头开始。

参数规则

• 正数：从指定索引开始向后查找。例如，fromIndex=2 表示从第三个元素开始。
• 负数：表示倒数位置。例如，fromIndex=-2 表示从倒数第二个元素开始。
• 超出范围：若 fromIndex 超过数组长度，会自动调整为从 0 开始。

示例 1：正数 fromIndex

const colors = ["red", "green", "blue", "yellow"];  
console.log(colors.includes("blue", 2)); // true（从索引 2 开始查找）  
console.log(colors.includes("green", 2)); // false（从索引 2 开始不包含 "green"）  

示例 2：负数 fromIndex

console.log(colors.includes("blue", -2)); // true（从倒数第二个元素开始查找）  
console.log(colors.includes("red", -4));  // true（等同于 fromIndex=0）  

四、注意事项与常见误区

1. 严格相等（===）的比较

includes() 使用严格相等（===）来判断元素是否匹配，因此类型必须完全一致。

[1, 2, 3].includes(1);      // true  
[1, 2, 3].includes("1");    // false（类型不同）  

2. 无法处理对象或数组的引用比较

对于对象或数组类型的元素，includes() 仅比较引用地址，而非内容。

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

解决方案：可先通过 find() 或手动遍历进行深度比较。

3. 稀疏数组的处理

在稀疏数组（通过 delete 或直接定义索引）中，includes() 会跳过未定义的元素。

const sparse = [];  
sparse[2] = "hello"; // 创建索引 2 的元素  
console.log(sparse.includes("hello")); // true  
delete sparse[2];  
console.log(sparse.includes("hello")); // false  

五、进阶用法：结合其他方法解决问题

1. 验证用户输入的合法性

const allowedColors = ["red", "green", "blue"];  
function validateColor(input) {  
  return allowedColors.includes(input) ? "合法" : "非法";  
}  
console.log(validateColor("yellow")); // 非法  

2. 去重与过滤

const numbers = [1, 2, 3, 2, 4, 3];  
const unique = [];  
numbers.forEach(num => {  
  if (!unique.includes(num)) {  
    unique.push(num);  
  }  
});  
console.log(unique); // [1,2,3,4]  

3. 处理嵌套对象数组

const users = [  
  { id: 1, name: "Alice" },  
  { id: 2, name: "Bob" }  
];  
function checkUserExist(id) {  
  return users.some(user => user.id === id); // 使用 some() 替代 includes()  
}  

六、常见问题解答

Q1：为什么 includes() 在 IE 浏览器中不兼容？

A：includes() 是 ES2016 的新增方法，旧版浏览器（如 IE）不支持。可通过 polyfill 兼容：

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

Q2：如何查找嵌套数组中的元素？

A：需先展开数组或递归遍历。

const nested = [[1, 2], [3, 4]];  
const exists = nested.some(arr => arr.includes(3)); // true  

结论

JavaScript Array includes() 方法 是开发者工具箱中的高效利器，尤其在判断元素存在性时，其简洁的语法和直观的返回值极大提升了代码的可读性和开发效率。通过本文的深入讲解，读者不仅掌握了基础用法，还了解了参数细节、常见误区及实际应用场景。建议读者在实际项目中多加练习，例如在表单验证、权限控制等场景中尝试使用 includes()，逐步体会其优势。

未来，随着 JavaScript 生态的持续发展，类似 includes() 这样的实用方法会越来越多，开发者需要保持学习热情，不断探索更优雅的解决方案。