在 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() 方法,因为它代码简洁、易读,且在大多数情况下性能良好。

相关推荐
Csvn6 小时前
渲染管线
前端
程序员大阳6 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
志尊宝6 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金6 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉6 小时前
借助 Codex 和可视化工作流,从调研到完整实现,3D 大屏竟然可以这么简单
前端·ai编程·数据可视化
IMPYLH7 小时前
HTML 的 <wbr> 元素
前端·html
paopaokaka_luck7 小时前
滑雪场管理系统(AI智能助手流式对话,ECharts 运营数据分析、教练、雪具与场地一体化预约,钱包支付退款、订单核销与服务评价)
java·人工智能·spring boot·网络协议·数据分析·echarts
Dovis(誓平步青云)7 小时前
常用命令藏得太深?怎么做一个快捷命令坞
运维·前端·自动化·音视频·prometheus
Wang's Blog8 小时前
Java 项目实战: 交友项目 - Dubbo 的内部结构与一次调用的完整链路
java·dubbo
Wang's Blog8 小时前
Java 项目实战: 交友项目 - Dubbo 入门引导
java·dubbo·交友