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

相关推荐
掘金安东尼5 小时前
纯 CSS 实现弹性文字效果
前端·css
牛奶6 小时前
Vue 基础理论 & API 使用
前端·vue.js·面试
牛奶6 小时前
Vue 底层原理 & 新特性
前端·vue.js·面试
anOnion6 小时前
构建无障碍组件之Radio group pattern
前端·html·交互设计
pe7er6 小时前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
SoaringHeart7 小时前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
晚风予星8 小时前
Ant Design Token Lens 迎来了全面升级!支持在 .tsx 或 .ts 文件中直接使用 Design Token
前端·react.js·visual studio code
sunny_8 小时前
⚡️ vite-plugin-oxc:从 Babel 到 Oxc,我为 Vite 写了一个高性能编译插件
前端·webpack·架构
GIS之路8 小时前
ArcPy 开发环境搭建
前端
林小帅10 小时前
【笔记】OpenClaw 架构浅析
前端·agent