在 JavaScript 中,删除数组中内容为xxx的元素

假设要删除内容为aaa的元素。

在 JavaScript 中,有几种方法可以删除数组中内容为aaa的元素。以下是几种常用的方法:

方法1:使用 filter() 方法(推荐)

javascript 复制代码
let arr = ["aaa", "bbb", "ccc", "aaa", "ddd"];
arr = arr.filter(item => item !== "aaa");
console.log(arr); // ["bbb", "ccc", "ddd"]

方法2:使用 for 循环(从后往前遍历)

javascript 复制代码
let arr = ["aaa", "bbb", "ccc", "aaa", "ddd"];
for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] === "aaa") {
        arr.splice(i, 1);
    }
}
console.log(arr); // ["bbb", "ccc", "ddd"]

方法3:使用 while 循环和 indexOf

javascript 复制代码
let arr = ["aaa", "bbb", "ccc", "aaa", "ddd"];
let index;
while ((index = arr.indexOf("aaa")) !== -1) {
    arr.splice(index, 1);
}
console.log(arr); // ["bbb", "ccc", "ddd"]

方法4:使用 reduce() 方法

javascript 复制代码
let arr = ["aaa", "bbb", "ccc", "aaa", "ddd"];
arr = arr.reduce((acc, current) => {
    if (current !== "aaa") {
        acc.push(current);
    }
    return acc;
}, []);
console.log(arr); // ["bbb", "ccc", "ddd"]

方法5:创建新数组(简单直接)

javascript 复制代码
let arr = ["aaa", "bbb", "ccc", "aaa", "ddd"];
let newArr = [];
for (let item of arr) {
    if (item !== "aaa") {
        newArr.push(item);
    }
}
console.log(newArr); // ["bbb", "ccc", "ddd"]

性能比较和建议

  • filter() 方法 是最简洁和易读的,适合大多数情况
  • 从后往前遍历 在使用 splice() 时性能更好,因为不会影响未遍历的索引
  • 如果数组很大,filter() 通常性能较好
  • 如果需要修改原数组而不是创建新数组,使用方法2或3

处理对象数组(如果需要)

如果数组包含对象,需要根据特定属性来删除:

javascript 复制代码
let arr = [
    {name: "aaa", id: 1},
    {name: "bbb", id: 2},
    {name: "aaa", id: 3}
];

// 删除 name 为 "aaa" 的对象
arr = arr.filter(item => item.name !== "aaa");
console.log(arr); // [{name: "bbb", id: 2}]

推荐使用 filter() 方法,因为它代码简洁、易读,且在大多数情况下性能良好。

相关推荐
一点一木1 小时前
深度体验TRAE SOLO移动端7天:作为独立开发者,我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑2 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
Lee川2 小时前
mini-cursor 揭秘:从 Tool 定义到 Agent 循环的完整实现
前端·人工智能·后端
一直不明飞行3 小时前
Java的equals(),hashCode()应该在什么时候重写
java·开发语言·jvm
REDcker3 小时前
有限状态机与状态模式详解 FSM建模Java状态模式与C++表驱动模板实践
java·c++·状态模式
canonical_entropy3 小时前
从 Spec-Driven Development 到 Attractor-Guided Engineering
前端·aigc·ai编程
研☆香3 小时前
聊聊前端页面的三种长度单位
前端
你的保护色3 小时前
【无标题】
java·服务器·网络
给钱,谢谢!3 小时前
React + PixiJS 实现果园成长页:从状态机到浇水动画
前端·react.js·前端框架
basketball6164 小时前
C++ 构造函数完全指南:从入门到进阶
java·开发语言·c++