ES6 Array.find()与findIndex()用法详解及参数说明

作者:异步漫步时间:2026-10-22 08:14:32浏览:472

本文详解ES6新增的Array.find()和findIndex()方法。find()返回首个满足条件的元素值,否则返回undefined;findIndex()返回索引,否则返回-1。两者回调均接收value、index、arr三个参数。文章通过示例演示数值查找及NaN的特殊处理,强调使用Object.is进行精确匹配。

ES6 Array查找方法概述

ES6规范为Array对象引入了find()和findIndex()两个新函数。

find()函数用于在数组中查找目标元素,一旦找到第一个满足条件的元素,即返回该元素的值;若遍历结束未找到,则返回undefined。

findIndex()函数同样用于查找目标元素,但返回的是该元素的索引位置;若未找到匹配项,则返回-1。

回调函数参数说明

这两个方法都接收一个回调函数作为参数,用于定义查找条件。

find()与findIndex()基础示例


[1, 2, 3, 4].find((value, index, arr) => {
})

该回调函数包含三个参数。

value:表示当前迭代查找的数组元素值。

index:表示当前迭代查找的元素索引。

arr:表示被查找的原始数组对象。

具体示例如下:

1. 查找元素值:找到则返回该值,未找到返回undefined。


const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
var ret1 = arr1.find((value, index, arr) => {
 return value > 4
})
var ret2 = arr1.find((value, index, arr) => {
 return value > 14
})
console.log('%s', ret1)
console.log('%s', ret2)

运行结果:

undefined

2. 查找元素索引:找到则返回索引,未找到返回-1。

NaN值的特殊处理


var ret3 = arr1.findIndex((value, index, arr) => {
 return value > 4
})

var ret4 = arr1.findIndex((value, index, arr) => {
 return value > 14
})
console.log('%s', ret3)
console.log('%s', ret4)

运行结果:

4 -1

3. 查找NaN值。


const arr2 = [1, 2, NaN, 4, 5, 6, 7, 8, 9, 10, 11]
var ret5 = arr2.find((value, index, arr) => {
 return Object.is(NaN, value)
})
var ret6 = arr2.findIndex((value, index, arr) => {
 return Object.is(NaN, value)
})
console.log('%s', ret5)
console.log('%s', ret6)

运行结果:

NaN 2

总结

以上内容介绍了ES6中Array.find()和findIndex()函数的具体用法,希望能帮助读者理解。如有任何疑问,欢迎留言,小编会及时回复!

作者最新文章