news 2026/6/15 15:40: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/6/15 10:41:03

性能测试实战:目的、策略与执行详解

性能测试实战:目的、策略与执行详解一、性能测试的核心目的性能测试通常围绕两个核心目标展开,它们分别关注系统能力的效率和极限。目的核心指标停止标准 / “失败”标志1. 测试系统的最大处理能力TPS(每秒事务数)找到 “性能拐点…

作者头像 李华
网站建设 2026/6/15 11:43:50

从零开始全面掌握 HTTPS

:开发者安全部署终极指南(完整版) 作者:安全与 Web 架构工程师 最后更新:2025年12月15日 适用读者:Web 开发者、运维工程师、安全初学者、高校学生、技术管理者 阅读前提:了解基本的 Web 请求概…

作者头像 李华
网站建设 2026/6/15 3:48:41

线性表之队列

队列是限制在两端进行插入操作和删除操作的线性表允许进行存入操作的一端称为“队尾”允许进行删除操作的一端称为“队头”当线性表中没有元素时,称为“空队”特点 :先进先出(FIFO)或后进后出普通队列的缺点: 出队后前…

作者头像 李华
网站建设 2026/6/15 15:34:33

C++ 多线程开发:从零开始的完整指南

一、为什么需要多线程? 在现代计算机体系结构中,多核处理器已成为标准配置。多线程编程允许我们充分利用这些计算资源,通过并行执行任务来提升程序性能。C11之前,多线程编程依赖于平台特定的API(如POSIX pthreads、Win…

作者头像 李华
网站建设 2026/6/15 12:51:52

大型公司中优秀工程师为何也会写出糟糕代码

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

作者头像 李华
网站建设 2026/6/14 12:51:19

13、AWK 基础与正则表达式入门

AWK 基础与正则表达式入门 1. AWK 文件内容显示与过滤 AWK 命令可用于过滤文件内容,甚至处理非常大的文件。在过滤文件之前,我们可以先打印整个文件,以熟悉命令的语法。以下是打印 /etc/passwd 文件所有行的命令: $ awk { print } /etc/passwd这等同于使用 $0 变…

作者头像 李华