0

0

js怎么判断数组包含元素 js判断数组包含元素的3种方法对比

冰火之心

冰火之心

发布时间:2025-06-24 21:35:01

|

1029人浏览过

|

来源于php中文网

原创

判断js数组是否包含元素的方法有includes()、indexof()和find()/findindex()。1. includes()直接返回布尔值,适用于只需判断是否存在元素的场景;2. indexof()返回元素索引,适用于需要获取位置或兼容老浏览器的情况;3. find()/findindex()支持复杂条件查找,适用于对象数组或需自定义逻辑的场景。处理nan时,includes()可正确识别,而indexof()不可靠。对于对象元素,严格相等比较无效,推荐使用find()或findindex()进行属性匹配。空数组调用这些方法均不会报错,无需特殊处理。性能上,includes()和indexof()较优,find()和findindex()因执行回调相对较慢。

js怎么判断数组包含元素 js判断数组包含元素的3种方法对比

判断JS数组是否包含元素,核心在于使用适当的方法进行查找和比较。常见方法包括includes()indexOf()find()/findIndex(),选择哪个取决于你的具体需求和目标浏览器的兼容性。

js怎么判断数组包含元素 js判断数组包含元素的3种方法对比

includes()、indexOf()、find() / findIndex()的对比

js怎么判断数组包含元素 js判断数组包含元素的3种方法对比

includes()

includes()方法是最直观的方式,它直接返回一个布尔值,表示数组是否包含指定的元素。

js怎么判断数组包含元素 js判断数组包含元素的3种方法对比
const arr = [1, 2, 3, 4, 5];

console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

优点:简单易懂,代码可读性高。

缺点:无法获取元素的索引,不支持复杂的查找条件。

适用场景:只需要知道数组是否包含某个元素,而不需要知道元素的位置。

indexOf()

indexOf()方法返回数组中找到指定元素的第一个索引,如果不存在则返回-1。

const arr = [1, 2, 3, 4, 5];

console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(6)); // -1

if (arr.indexOf(3) !== -1) {
  console.log("数组包含元素3");
}

优点:可以获取元素的索引,兼容性较好(ES5)。

缺点:只能查找第一个匹配的元素,无法进行复杂的条件查找。

适用场景:需要知道元素在数组中的位置,或者需要兼容老版本的浏览器。

find() / findIndex()

find()方法返回数组中满足提供的测试函数的第一个元素的值,否则返回undefinedfindIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。

摄图AI
摄图AI

摄图网旗下AI视觉创作平台

下载
const arr = [
  { id: 1, name: "apple" },
  { id: 2, name: "banana" },
  { id: 3, name: "orange" },
];

const found = arr.find((element) => element.name === "banana");
console.log(found); // { id: 2, name: "banana" }

const foundIndex = arr.findIndex((element) => element.name === "banana");
console.log(foundIndex); // 1

优点:可以进行复杂的条件查找,灵活性高。

缺点:兼容性相对较差(ES6),代码相对复杂。

适用场景:需要根据复杂的条件查找元素,或者需要处理对象数组。

如何处理NaN值的判断?

includes()可以正确判断NaN,而indexOf()不能。这是因为indexOf()使用严格相等(===)进行比较,而NaN === NaN的结果是false

const arr = [1, 2, NaN, 4, 5];

console.log(arr.includes(NaN)); // true
console.log(arr.indexOf(NaN)); // -1

如果需要使用indexOf()判断数组是否包含NaN,可以先使用find()findIndex()找到NaN的索引。

性能考量:哪种方法更快?

通常来说,includes()indexOf()在简单查找时性能相近,但includes()在语义上更清晰。find()findIndex()由于需要执行回调函数,性能相对较差。

如果对性能有较高要求,且只需要判断数组是否包含某个基本类型的值,建议使用includes()indexOf()

数组元素是对象时,如何判断包含?

当数组元素是对象时,includes()indexOf()默认使用严格相等(===)进行比较,这意味着只有当数组中存在与目标对象完全相同的对象(引用相同)时,才会返回true或正确的索引。

const arr = [{ id: 1 }, { id: 2 }];
const obj = { id: 1 };

console.log(arr.includes(obj)); // false, 因为obj和arr[0]是不同的对象

// 使用find()进行比较
const found = arr.find((item) => item.id === obj.id);
console.log(found); // { id: 1 }

这种情况下,find()findIndex()是更好的选择,因为它们允许你自定义比较逻辑。

如何处理空数组的情况?

这三种方法在处理空数组时都不会报错。

  • includes()会返回false
  • indexOf()会返回-1
  • find()会返回undefined
  • findIndex()会返回-1

因此,在使用这些方法之前,不需要专门对空数组进行处理。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

94

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

185

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

188

2025.12.24

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

505

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

240

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

246

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5201

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

25

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 6万人学习

Django 教程
Django 教程

共28课时 | 2.4万人学习

Excel 教程
Excel 教程

共162课时 | 9.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号