find 和 findIndex 的讲解和实现

简介: `findIndex` 是 JavaScript 数组方法,用于查找数组中满足条件元素的索引。语法:`array.findIndex(callback[, thisArg])`。`callback` 定义查找条件,并可接收元素、索引和数组自身作为参数。`findIndex` 从头遍历数组,找到首个符合条件的元素即返回其索引,未找到则返回 -1。

findIndex

在 JavaScript 中,findIndex 是一个数组方法,用于查找数组中满足指定条件的元素的索引。它的基本语法如下:

 array.findIndex(callback(element[, index[, array]])[, thisArg])

让我们逐个解释这些参数和用法:

  • array:要在其中查找元素的数组。

  • callback:一个回调函数,用于定义查找条件。它接收三个参数:

    • element:当前正在被处理的数组元素。
    • index(可选):当前元素的索引。
    • array(可选):调用 findIndex 的数组。 回调函数应返回一个布尔值,表示当前元素是否满足条件。
  • thisArg(可选):在执行回调函数时使用的 this 值。

findIndex 方法会从数组的第一个元素开始遍历,直到找到满足条件的元素或遍历完整个数组。如果找到满足条件的元素,则返回该元素的索引;否则返回 -1

下面是一个简单的示例,演示如何使用 findIndex 方法:

 const numbers = [1, 2, 3, 4, 5];const greaterThanThreeIndex = numbers.findIndex((element) => element > 3);
 console.log(greaterThanThreeIndex); // 输出: 3

在上面的例子中,我们定义了一个数组 numbers,然后使用 findIndex 方法查找第一个大于 3 的元素的索引。由于 4 是第一个满足条件的元素,所以返回索引 3。

需要注意的是,findIndex 方法是 ES6 中引入的新特性,因此在较旧的浏览器或环境中可能不被支持。如果需要在不支持的环境中使用该方法,可以考虑使用 polyfill 或其他类似的解决方案来实现相同的功能。

const arr1 = [1, 2, 3, 4, 5]
Array.prototype.myFindIndex = function (cb) {
   
    for (let i = 0; i < this.length; i++) {
   
        // 如果找到 返回当前元素的索引
        if (cb(this[i], i, this)) {
   
            return i
        }


    }
      // 如果上面结束 还没有找到, 就   返回-1
      return -1
}

const index = arr1.myFindIndex(function (item) {
   
    return item == 3
})

console.log(index);

find

find 是 JavaScript 中的另一个数组方法,它与 findIndex 类似,但返回的是满足条件的元素本身,而不是索引

const arr1 = [1, 2, 3, 4, 5]
Array.prototype.myFindIndex = function (cb) {
   
    for (let i = 0; i < this.length; i++) {
   
        // 如果找到 返回当前元素
        if (cb(this[i], i, this)) {
   
            return this[i]
        }

    }
      // 如果上面结束 还没有找到, 就 undefined
      return undefined
}

const index = arr1.myFindIndex(function (item) {
   
    return item == 3
})

console.log(index);
目录
相关文章
|
4月前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
JavaScript 索引
JS数组常用方法(超级详细,含理解) push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map
JS数组常用方法(超级详细,含理解) push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map
332 0
|
索引
ES6——find()、findindex()、indexof、includes()以及some
find()、findindex()、indexof、includes()以及some
115 0
常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every
常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every
184 0
find
find
92 0
|
算法 容器
常用查找算法 find() find_if() adjacent_find() binary_search() count() count_if()
常用查找算法 find() find_if() adjacent_find() binary_search() count() count_if()
|
JavaScript 索引
js 数组遍历方法详解(map、filter、find、findIndex、reduce)
js 数组遍历方法详解(map、filter、find、findIndex、reduce)
|
Web App开发 JavaScript
$(...).find is not a function
$(...).find is not a function
212 0
Find a way
Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one year, yifenfei have many people to meet. Especially a good friend Merceki.
147 0