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);
目录
相关文章
|
机器学习/深度学习 自然语言处理 机器人
【RAG实践】基于LlamaIndex和Qwen1.5搭建基于本地知识库的问答机器人
LLM会产生误导性的 “幻觉”,依赖的信息可能过时,处理特定知识时效率不高,缺乏专业领域的深度洞察,同时在推理能力上也有所欠缺。
|
JSON 应用服务中间件 nginx
【Nginx】第十二节 配置跨域访问
【Nginx】第十二节 配置跨域访问
1226 0
【Nginx】第十二节 配置跨域访问
使用全局scss变量
使用全局scss变量
1280 0
|
Web App开发 弹性计算
阿里云ECS云服务器系统盘不够用怎么办?磁盘扩容功能了解一下
阿里云ECS云服务器默认搭配的是40G的系统盘,系统盘不够用怎么办?云服务器吧告诉大家ECS系统盘支持磁盘扩容更能,无需更换系统盘,一键扩容: ECS云服务器磁盘扩容 以前ECS云服务器系统盘不够用,是通过更换系统盘来实现的,更换系统盘时通过更换一个新的磁盘,选择一个镜像的方式来扩容,老的磁盘会被释放,十分麻烦。
15698 1
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
1074 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
JavaScript 前端开发
JS中find的用法
JS中find的用法
722 0
|
前端开发 API 开发者
React 文件上传组件 File Upload
本文详细介绍了如何在 React 中实现文件上传组件,从基础的文件选择和上传到服务器,再到解决文件大小、类型限制、并发上传等问题,以及实现多文件上传、断点续传和文件预览等高级功能,帮助开发者高效构建可靠的应用。
1172 13
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6322 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
前端开发 JavaScript
使用 JavaScript 获取 URL 参数的详细指南
【2月更文挑战第26天】
16139 2
使用 JavaScript 获取 URL 参数的详细指南