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);
目录
相关文章
|
JavaScript API
required string parameter ‘XXX‘is not present 的几种情况
required string parameter ‘XXX‘is not present 的几种情况
2937 0
|
存储 前端开发 JavaScript
【第24期】一文读懂React生态
【第24期】一文读懂React生态
398 0
|
存储 PHP 数据库
Laravel-admin实现时间戳和自定义日期的自动转换
今天介绍我在使用laravel-admin遇到的坑,我数据库存储的时间是int类型的时间戳,需要在管理后台展示日期怎么优雅的实现呢?
1671 0
Laravel-admin实现时间戳和自定义日期的自动转换
|
Web App开发 监控 前端开发
10分钟彻底搞懂前端页面性能监控
前端页面性能是一个非常核心的用户体验指标。本文介绍阿里UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigation Timing API以及sendBeacon等方法。
3503 0
10分钟彻底搞懂前端页面性能监控
|
缓存 资源调度 JavaScript
Vue集成Excalidraw实现在线画板功能
Excalidraw是一款开源在线绘图工具,适用于白板、思维导图、原型设计等场景。支持手绘风格、多种图形元素、导出功能及多人协作,深受开发者喜爱。本文档介绍了如何在Vue项目中集成Excalidraw,包括安装依赖、配置文件修改、页面添加等步骤,帮助开发者快速上手。
1789 0
Vue集成Excalidraw实现在线画板功能
|
12月前
|
人工智能 IDE 程序员
GitHub Copilot 免费了!程序员们的福音来了!
《GitHub Copilot 免费了!程序员们的福音来了!》 近日,GitHub 宣布其 AI 编程助手 GitHub Copilot 现在可以免费使用。曾经每月需支付 10 美元订阅费的 Copilot,现在向所有人开放免费版本,这对个人开发者、初学者和小型团队来说是个大好消息。免费版支持 GPT 和 Claude 模型,并提供每月 2000 次代码补全和 50 条聊天消息等核心功能。用户只需注册或登录 GitHub 账户,在 VS Code 中安装扩展并激活免费版即可使用。此外,Visual Studio Code 也完全免费,进一步降低了开发门槛。 除了
12036 7
GitHub Copilot 免费了!程序员们的福音来了!
|
前端开发 API 开发者
React 文件上传组件 File Upload
本文详细介绍了如何在 React 中实现文件上传组件,从基础的文件选择和上传到服务器,再到解决文件大小、类型限制、并发上传等问题,以及实现多文件上传、断点续传和文件预览等高级功能,帮助开发者高效构建可靠的应用。
920 12
|
资源调度 前端开发 数据安全/隐私保护
react动态路由权限
【8月更文挑战第29天】 react动态路由权限
495 4
|
缓存 运维 负载均衡
分布式系统架构设计与挑战
【6月更文挑战第29天】分布式系统架构设计涉及组件化、通信、数据一致性、负载均衡和容错处理,旨在实现高可用性和可扩展性。然而,数据一致性、性能、可伸缩性和容错是主要挑战。解决方案包括使用一致性算法、性能优化、设计可伸缩架构和实施容错机制。随着技术进步,这类系统将继续在云、大数据和物联网中扮演关键角色。
|
存储 缓存 资源调度
npm、cnpm、yarn和pnpm,我们应该选择哪个包管理工具?
在前端开发中,包管理工具是必不可少的工具之一。目前,市面上有多种包管理工具可供选择,如 `npm`、`cnpm`、`yarn` 和 `pnpm` 等。这些工具都具有自己的优点和缺点,选择适合自己的工具可以提高开发效率和代码质量。 本文将对这些工具的特点、优缺点和使用方法进行详细介绍,从而选择最适合自己的包管理工具。
2967 1
npm、cnpm、yarn和pnpm,我们应该选择哪个包管理工具?