当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript数组查找：find和findIndex详解

JavaScript数组查找：find和findIndex详解

2026-01-27 08:21:48 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《JavaScript数组查找：find与findIndex用法解析》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

find()返回首个满足条件的元素值，否则undefined；findIndex()返回对应索引，否则-1；两者均不改变原数组，常用于高效查找与定位。

JavaScript 数组查找：find() 与 findIndex() 方法详解

在 JavaScript 中处理数组时，经常需要根据特定条件查找元素。find() 和 findIndex() 是两个非常实用的方法，它们能帮助我们快速定位符合条件的数组项或索引。这两个方法不会改变原数组，且只返回第一个匹配的结果。

find() 方法：查找符合条件的元素

find() 方法用于遍历数组，返回满足条件的第一个元素的值。如果没有找到匹配项，则返回 undefined。

它的语法如下：

arr.find(function(element, index, array) { return condition; });

回调函数接收三个参数：

element：当前遍历的元素
index（可选）：当前元素的索引
array（可选）：调用 find 的原数组

示例：查找年龄大于 18 的第一个用户

const users = [ { name: 'Alice', age: 17 }, { name: 'Bob', age: 20 }, { name: 'Charlie', age: 19 } ]; const adult = users.find(user => user.age > 18); // 结果：{ name: 'Bob', age: 20 }

findIndex() 方法：查找符合条件元素的索引

findIndex() 与 find() 类似，但它返回的是第一个满足条件的元素的索引，而不是值。如果没有找到，返回 -1。

语法结构与 find() 相同：

arr.findIndex(function(element, index, array) { return condition; });

这个方法特别适合用于判断某个元素是否存在，并获取其位置。

示例：查找名字为 'Charlie' 的用户的索引

const index = users.findIndex(user => user.name === 'Charlie'); // 结果：2

也可以用来判断是否存在某条数据：

if (users.findIndex(u => u.age

两者的区别与使用场景

虽然 find() 和 findIndex() 都基于条件查找，但用途略有不同：

当你需要获取元素本身时，使用 find()
当你关心的是元素的位置，或想通过索引修改、删除元素时，使用 findIndex()
find() 返回值可能是对象、数字等，而 findIndex() 总是返回数字（-1 或非负整数）

比如，在更新数组中的某一项时，可以结合两者：

const idx = users.findIndex(u => u.name === 'Bob'); if (idx !== -1) { users[idx] = { ...users[idx], age: 21 }; // 更新 Bob 的年龄 }

基本上就这些。find() 和 findIndex() 让条件查找更简洁直观，避免了手动写循环和标记变量。掌握它们的差异，能让代码更清晰高效。

本篇关于《JavaScript数组查找：find和findIndex详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

数组查找

迅宝查货技巧：快速定位商品方法

上一篇: 迅宝查货技巧：快速定位商品方法

下一篇: 手机远程控制电脑，向日葵APP使用教程

查看更多