当前位置: 首页 > news >正文

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 会改变数组长度。

相关文章:

  • STM32 CAN CANAerospace
  • 使用 Docker 搭建 PyWPS 2.0 服务全流程详解
  • matIo库及.mat数据格式介绍
  • AI智能分析网关V4区域入侵检测算法:全功能覆盖,多场景守护安防安全
  • 【技术追踪】ADDP:通过交替去噪扩散过程学习用于图像识别和生成的通用表示(ICLR-2024)
  • 【Linux 学习计划】-- makefile
  • 6.13.拓扑排序
  • 危险品摆渡人
  • BSD 操作系统的历史、影响及贡献
  • day33 python深度学习入门
  • k8s容器入门(1)有状态服务 vs 无状态服务 核心区别
  • 企业级爬虫进阶开发指南
  • Vue 3 与 Vue 2 的区别详解
  • 【Leetcode 每日一题】3362. 零数组变换 III
  • KCTF-CCG CrackMe crypto 1.0
  • 从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
  • Linux spi
  • 【语法】C++的map/set
  • 问题 | 撰写一份优秀的技术文档,既是科学也是艺术。
  • 基于大模型的胫腓骨干骨折全周期预测与治疗方案研究报告
  • 黔西南北京网站建设/广告公司营销策划方案
  • iis网站建设中/宁波seo教程app推广
  • 如何给网站做权重/高级seo是什么职位
  • 互动平台抽手机/东莞网站优化公司
  • 某某公司电子商务网站建设与维护/seo和sem的联系
  • 深圳市网站首页/专业北京网站建设公司