JavaScript find和findIndex如何用_它们如何查找元素?

find返回第一个匹配元素值,findIndex返回其索引;均不修改原数组,找到即停,未找到时分别返回undefined和-1。

findfindIndex 是数组方法,用来按条件查找元素——find 返回第一个匹配的**元素值**,findIndex 返回它的**下标(索引)**。它们不修改原数组,只遍历,找到就停,没找到分别返回 undefined-1

find:拿到匹配的元素本身

它接收一个回调函数,对每个元素执行判断,一旦返回真值(truthy),立刻返回当前元素,不再往后看。

  • 回调函数参数通常是 itemindexarray,常用前两个
  • 没找到时返回 undefined,记得做存在性检查,避免报错
  • 适合“我要这个对象”“我要这个数字”的场景

例子:
const users = [{id: 1, name: '张三'}, {id: 2, name: '李四'}];
const user = users.find(u => u.id === 2); // {id: 2, name: '李四'}

findIndex:拿到匹配元素的位置

逻辑和 find 完全一样,只是返回的是索引号(从 0 开始),不是元素本身。

  • 返回 -1 表示没找到,这是关键判断依据
  • 适合“我要删掉它”“我要更新它”“我要在它前面插一个”这类需要位置的操作
  • 配合 splicearray[index] = ... 很常用

例子:
const nums = [10, 20, 30, 40];
const idx = nums.findIndex(n => n > 25); // 2(因为 30 是第一个大于 25 的,索引是 2)

它们怎么“查找”?底层逻辑很简单

就是从左到右逐个调用你的回调函数,传入当前元素,看返回值是不是真值:

  • 只要回调返回 true、非空字符串、非零数字、对象、数组等真值,立即停止并返回结果
  • 如果一直没遇到真值,遍历完就结束
  • 不会跳过空位(稀疏数组中 undefined 位置也会被传入回调)

常见注意点

  • 只适用于数组,类数组对象(如 arguments)要先转成数组再用
  • 不能直接用于对象,想查对象属性得先用 Object.keys()Object.entries() 转成数组
  • 箭头函数里没有 this 绑定问题,但普通函数要注意 this 指向(除非显式传参)
  • 性能上比 for 循环略低一点,但代码更清晰;大数据量且高频调用时可考虑循环

基本上就这些。用熟了你会发现,它们比写 for 循环查 + break 简洁太多,也比 filter[0] 更高效(filter 全遍历,find 找到就停)。