news 2026/10/3 6:45:52

this.selectedTestType.findIndex(x => x.name === item.name);findIndex 的作用详细介绍

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
this.selectedTestType.findIndex(x => x.name === item.name);findIndex 的作用详细介绍

。

// 选中 / 取消toggleTestType(item:TestTypeItem){item.checked=!item.checked;constindex=this.selectedTestType.findIndex(x=>x.name===item.name);if(item.checked&&index===-1){this.selectedTestType.push(item);}elseif(!item.checked&&index>-1){this.selectedTestType.splice(index,1);}}

1. findIndex 的作用

  • const index = this.selectedTestType.findIndex(x => x.name === item.name);

  • findIndex 会遍历数组,找出 第一个满足条件的元素的索引。

  • 返回值:

    • 如果找到匹配元素 → 返回该元素在数组中的索引(从 0 开始)。

    • 如果没有找到 → 返回 -1。

举个例子:

constarr=['a','b','c'];arr.findIndex(x=>x==='b');// 返回 1arr.findIndex(x=>x==='d');// 返回 -1

所以 -1 就是 数组中不存在这个元素的标记。

2. 为什么写 index === -1 和 index > -1

if(item.checked&&index===-1){this.selectedTestType.push(item);}elseif(!item.checked&&index>-1){this.selectedTestType.splice(index,1);}
  • item.checked && index === -1:

    • 条件解释:当前项被选中,但还没有在已选数组里

    • 动作:把它加入 selectedTestType。

  • !item.checked && index > -1:

    • 条件解释:当前项被取消选中,并且在已选数组里存在

    • 动作:从 selectedTestType 中移除它。

  • 关键点:

    • -1 表示“未找到”,所以要用它判断是否存在。

    • index > -1 表示“找到了”,可以安全地删除。

详细解释:array.splice(start, deleteCount, …items)

  • start → 从数组的哪个索引位置开始操作

  • deleteCount → 要删除多少个元素

  • …items → 可选,要插入的新元素

this.selectedTestType.splice(index,1);

index → 找到的要删除的元素在数组中的位置

1 → 只删除一个元素

没有提供其他元素 → 所以只是删除,不添加新元素

这一行就是 从 selectedTestType 数组中移除被取消选中的测试类型。

3. 总结

  • index 的确是从 0 开始计数的,但 findIndex 没有找到时才返回 -1。

  • 所以这里的判断逻辑是为了:

  • 防止重复添加(避免数组中出现重复元素)

  • 只删除存在的元素,避免报错

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/2 22:53:30

基于STM32与机智云平台的智能台灯系统设计与实现

基于STM32与机智云平台的智能台灯系统设计与实现 摘要 本文设计并实现了一种基于STM32F103C8T6单片机与机智云平台的智能台灯系统。该系统整合了多维环境感知与智能照明控制功能,通过DHT11温湿度传感器(精度:温度2℃、湿度5%)、HC-SR04超声波传感器(测距范围2-400cm,精…

作者头像 李华
网站建设 2026/10/1 7:12:36

阻塞队列:三组核心方法全对比

深入解析阻塞队列:三组核心方法全对比与实战指南引言:为什么需要阻塞队列?在多线程编程中,线程间的数据共享和通信是一个常见而复杂的问题。传统的共享变量方式需要开发者手动处理线程同步、等待/通知机制,这既容易出错…

作者头像 李华
网站建设 2026/10/2 19:54:13

性能测试实战:混合场景与稳定性测试详解

性能测试实战:混合场景与稳定性测试详解一、性能测试场景实战回顾1. 单接口基准测试(已完成)目的:寻找单个接口的性能拐点(最佳并发 & 最大TPS)。策略:从小并发(如10&#xff09…

作者头像 李华
网站建设 2026/10/2 12:06:27

37、高阶多智能体系统具有对抗交互和切换拓扑的二分共识研究

高阶多智能体系统具有对抗交互和切换拓扑的二分共识研究 1. 引言 在过去的10 - 15年里,多智能体系统和共识问题受到了广泛关注。多数研究假设智能体通过协作来达成共识,即它们为了共同目标交换信息。然而,在许多实际场景中,两个智能体可能将彼此视为对手,即便能获取对方…

作者头像 李华
网站建设 2026/10/1 17:05:30

10、函数与流编辑器的使用指南

函数与流编辑器的使用指南 在脚本编写的世界里,函数和流编辑器是两个强大的工具,它们能显著提升脚本的效率和可维护性。下面将详细介绍函数的使用以及流编辑器的相关内容。 函数的使用 1. 数组传递 在函数调用时,并非所有传递的值都是单个值,有时需要传递数组。以下是传…

作者头像 李华
网站建设 2026/10/1 6:25:16

交通信号仿真软件:Vistro_(2).交通信号控制基础理论

交通信号控制基础理论 1. 交通信号控制的基本概念 交通信号控制是指通过信号灯的红、黄、绿三种颜色的变化,来指导和管理交通流的运行。这种控制方式可以有效地减少交通拥堵,提高道路的通行能力,确保交通安全。在交通信号仿真软件中&#xff…

作者头像 李华