JavaScript中从原数组中删除某个元素

一、删除基本数组中的某元素

1. 删除第一个匹配的元素(修改原数组)

使用 indexOf 找到元素索引,再用 splice 删除:

function removeFirst(arr, value) {const index = arr.indexOf(value);if (index !== -1) {arr.splice(index, 1);}return arr;
}// 示例
let arr = [1, 2, 3, 4, 5];
removeFirst(arr, 3); // arr 变为 [1, 2, 4, 5]

2. 删除所有匹配的元素(修改原数组)

通过反向遍历删除所有匹配项:

function removeAll(arr, value) {for (let i = arr.length - 1; i >= 0; i--) {if (arr[i] === value) {arr.splice(i, 1);}}return arr;
}// 示例
let arr = [1, 2, 3, 3, 4];
removeAll(arr, 3); // arr 变为 [1, 2, 4]

二、删除对象数组中的某元素

1:删除第一个匹配属性值的对象(修改原数组)

通过 findIndex 查找匹配属性的对象索引,再用 splice 删除:

function removeObjectByKey(arr, key, value) {const index = arr.findIndex(item => item[key] === value);if (index !== -1) {arr.splice(index, 1);}return arr;
}// 示例
let users = [{ id: 1, name: "Alice" },{ id: 2, name: "Bob" },{ id: 3, name: "Charlie" }
];
removeObjectByKey(users, 'id', 2); // 删除 id=2 的对象
console.log(users); // [{ id: 1 }, { id: 3 }]

2:删除所有匹配属性值的对象(修改原数组)

反向遍历数组,避免索引错位问题:

function removeAllObjectsByKey(arr, key, value) {for (let i = arr.length - 1; i >= 0; i--) {if (arr[i][key] === value) {arr.splice(i, 1);}}return arr;
}// 示例
let users = [{ role: "admin", name: "Alice" },{ role: "user", name: "Bob" },{ role: "admin", name: "Charlie" }
];
removeAllObjectsByKey(users, 'role', 'admin'); // 删除所有 role=admin 的对象
console.log(users); // [{ role: "user", name: "Bob" }]

3:删除完全相同的对象引用(修改原数组)

如果对象是直接引用,可以用 indexOf 或 includes

const objToRemove = { id: 2 };
let arr = [{ id: 1 },objToRemove, // 直接引用{ id: 3 }
];const index = arr.indexOf(objToRemove);
if (index !== -1) {arr.splice(index, 1);
}console.log(arr); // [{ id: 1 }, { id: 3 }]

注意事项:

  1. 引用比较 vs 值比较
    如果对象是动态生成的(如 { id: 2 }),直接比较引用会失败,必须通过属性值判断。

    javascript

    复制

    下载

    // 以下代码不会删除任何对象,因为新对象 { id: 2 } 与原对象引用不同!
    arr.splice(arr.indexOf({ id: 2 }), 1);
  2. 深拷贝问题
    如果对象包含嵌套结构(如数组、子对象),需确保比较逻辑覆盖所有需要判断的属性。

  3. 性能优化
    如果数组很大,反向遍历(for (let i = arr.length - 1; ...) 比正向遍历更高效,因为 splice 会改变数组长度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/84108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uni-app学习笔记六-vue3响应式基础

一.使用ref定义响应式变量 在组合式 API 中&#xff0c;推荐使用 ref() 函数来声明响应式状态&#xff0c;ref() 接收参数&#xff0c;并将其包裹在一个带有 .value 属性的 ref 对象中返回 示例代码&#xff1a; <template> <view>{{ num1 }}</view><vi…

【JAVA基础】什么情况下可以直接使用类名.方法名调用方法?

在Java中&#xff0c;直接通过类名.方法名调用方法需要满足以下条件&#xff0c;这些场景和规则可以通过搜索结果中的技术细节得到验证&#xff1a; 条件 1. 调用静态方法 静态方法&#xff08;用static修饰&#xff09;属于类而非对象&#xff0c;因此可以直接通过类名调用&…

wifi 如果检查失败,UI 就会出现延迟或缺失打勾的现象。

问题&#xff1a;connectedSsid 的初始化依赖 onCreate 中的状态检查&#xff0c;如果检查失败&#xff0c;UI 就会出现延迟或缺失打勾的现象。 WIFI界面上上的一个标识代表成功连接。重启后出现偶尔不打勾的情况。 原始代码&#xff1a; // if (connectedSsid !…

Skywalking安装部署使用教程

目录 核心功能 架构设计 安装与配置 使用场景 社区与支持 总结 官网 https:///apache/skywalking 部署Skywalking 添加报警配置 自定义告警规则如果您需要自定义告警规则,则需要编辑 alarm-settings.yml 文件并添加自定义的规则。具体来说,您需要按照 YAML 格式定义…

2025版 JavaScript性能优化实战指南从入门到精通

JavaScript作为现代Web应用的核心技术&#xff0c;其性能直接影响用户体验。本文将深入探讨JavaScript性能优化的各个方面&#xff0c;提供可落地的实战策略。 一、代码层面的优化 1. 减少DOM操作 DOM操作是JavaScript中最昂贵的操作之一&#xff1a; // 不好的做法&#x…

基于企业数字化转型战略的数据治理方法论与顶层设计思路

文档围绕企业数字化转型战略的数据治理方法论与顶层设计思路展开,指出数字化技术(如人工智能、云计算等)驱动企业商业模式变革,需构建云架构与平台化思想的数字化生态。数据治理范畴涵盖战略、组织、标准等,需经历数据资产盘点、清洗、重新组织、持久化管理等流程,涉及主…

科学养生指南:解锁健康生活密码

健康是人生最宝贵的财富&#xff0c;在快节奏的现代生活中&#xff0c;科学养生成为保持良好状态的关键。遵循现代医学与营养学的研究成果&#xff0c;无需依赖传统中医理论&#xff0c;我们也能找到适合自己的养生之道。​ 均衡饮食是健康的基石。现代营养学强调 “食物多样&…

ML 48.机器学习之临床生存树(rpartSurv)

简介机器学习中生存树&#xff08;Survival Tree&#xff09;的原理详解 生存树是结合决策树与生存分析的机器学习模型&#xff0c;主要用于处理带有时间-事件数据&#xff08;包含删失数据&#xff09;的预测问题。其核心目标是&#xff1a;通过树状结构对数据进行递归分割&am…

测试文章1

本篇技术博文摘要 &#x1f31f; 引言 &#x1f4d8; 在这个变幻莫测、快速发展的技术时代&#xff0c;与时俱进是每个IT工程师的必修课。我是盛透侧视攻城狮&#xff0c;一名什么都会一丢丢的网络安全工程师&#xff0c;也是众多技术社区的活跃成员以及多家大厂官方认可人员&a…

【Ubuntu修改串口延时(Latency Timer)为1毫秒(设备拔插或系统重启后自动生效)】

Ubuntu修改串口延时Latency Timer为1毫秒-设备拔插或系统重启后自动生效 在Ubuntu系统中&#xff0c;串口设备的延时参数(latency_timer)可以通过udev规则永久修改。以下是完整步骤&#xff1a; 创建udev规则文件 sudo vim /etc/udev/rules.d/99-ftdi-low-latency.rules添加以…

【C++进阶篇】红黑树的实现(赋源码)

红黑树&#xff1a;如何用颜色和旋转征服复杂数据 一. 红黑树简介1.1 基本概念1.2 红黑树效率1.3 意义1.4 应用场景 二. 红黑树实现2.1 红黑树结构2.2 插入&#xff08;难点&#xff09;2.2.1 单纯变色的情况2.2.2 单旋变色2.2.3 双旋变色 2.3 查找2.4 红黑树的验证2.5 AVL与RB…

【软考向】Chapter 3 数据结构

线性结构线性表顺序存储 —— 访问易&#xff0c;增删难链式存储 —— 访问难、增删易 栈 —— 后进先出 和 队列 —— 先进先出字符串 —— KMP 匹配算法 数组、矩阵和广义表数组 树 —— 树根为第一层&#xff0c;最大层数为树高/深度线索二叉树哈夫曼编码树和森林 —— 树的…

Python 训练 day31

知识点回顾 规范的文件命名规范的文件夹管理机器学习项目的拆分编码格式和类型注解 作业&#xff1a;尝试针对之前的心脏病项目ipynb&#xff0c;将他按照今天的示例项目整理成规范的形式&#xff0c;思考下哪些部分可以未来复用。 机器学习项目的流程 一个典型的机器学习项目通…

C++?模板(进阶)!!!

一、引言 在之前我们已经介绍过C中引入的非常好用的一个工具--模板&#xff0c;同时借助模拟实现string、vector、list等容器熟悉了如何使用模板&#xff0c;今天我们将要一起学习有关模板的进阶知识&#xff0c;如果还想了解模板的概念以及基础的使用可以跳转到以下链接&#…

《量子计算实战》PDF下载

内容简介 在加密、科学建模、制造物流、金融建模和人工智能等领域&#xff0c;量子计算可以极大提升解决问题的效率。量子系统正变得越来越强大&#xff0c;逐渐可用于生产环境。本书介绍了量子计算的思路与应用&#xff0c;在简要说明与量子相关的科学原理之后&#xff0c;指…

Vue3前后端分离用户信息显示方案

在Vue3前后端分离的项目中&#xff0c;若后端仅返回用户ID&#xff0c;可通过以下步骤显示用户名&#xff1a; 解决方案 获取用户信息API 确保后端提供以下任意一种接口&#xff1a; 批量查询接口&#xff1a;传入多个用户ID&#xff0c;返回对应的用户信息列表 单个查询接口…

艾默生流量计与Profibus DP主站转Modbus RTU/TCP网关通讯案例

艾默生流量计与Profibus DP主站转Modbus RTU/TCP网关通讯案例 在现代工业自动化控制系统中&#xff0c;艾默生流量计因其高精度、稳定性和易用性而备受青睐。然而&#xff0c;为了实现与不同协议设备之间的无缝通信&#xff0c;经常需要借助专业的通讯网关进行协议转换。本文将…

SQL优化学习笔记

SQL优化 insert优化 常规优化思路 每次插入数据时都需要和数据库建立连接、关闭连接&#xff0c;因此批量插入会大量节省IO避免浪费。&#xff08;每次500-1000条&#xff09;开启手动提交事务&#xff08;start transaction … commit&#xff09;主键顺序插入&#xff1a;…

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Hidden Search Widget (交互式搜索框)

&#x1f4c5; 我们继续 50 个小项目挑战&#xff01;—— Hidden Search Widget 组件 仓库地址&#xff1a;https://github.com/SunACong/50-vue-projects 项目预览地址&#xff1a;https://50-vue-projects.vercel.app/ ✨ 组件目标 点击按钮展开隐藏的搜索框 再次点击按钮…

大模型——多模态检索的RAG系统架构设计

文章目录 1. 系统架构设计核心组件 2. 跨模态向量空间对齐方案方法一&#xff1a;预训练对齐模型&#xff08;如CLIP&#xff09;方法二&#xff1a;跨模态投影网络方法三&#xff1a;联合微调 3. 混合检索策略4. 关键问题解决Q: 如何解决模态间向量尺度不一致&#xff1f;Q: 如…