当前位置：首页 > 文章列表 > 文章 > 前端 > JS如何删除数组指定元素？3种高效方法手把手教学

JS如何删除数组指定元素？3种高效方法手把手教学

2025-06-22 17:54:16 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

在JavaScript中，删除数组指定元素是常见操作。本文将手把手教你三种高效实现方式，助你轻松应对各种场景。首先介绍直接修改原数组的`splice()`方法，它适用于删除单个元素，但需注意其副作用。其次是创建新数组的`filter()`方法，该方法保留原数组，并可删除多个匹配元素，更安全可靠。最后，针对数组元素为对象的场景，推荐结合`findIndex()`和`splice()`，根据对象属性精准删除元素。选择哪种方法？关键在于是否需要修改原数组、性能考量以及删除条件的复杂度。掌握这三种方法，让你在JS数组操作中游刃有余。

删除JavaScript数组中的指定元素有三种常用方法。1. 使用splice()直接修改原数组，适合删除单个元素但需注意副作用；2. 使用filter()创建新数组，保留原数组且可删除多个匹配元素；3. 结合findIndex()和splice()，适用于根据对象属性删除元素。选择方法需考虑是否修改原数组、性能及删除条件复杂度。

js如何删除数组指定元素数组元素删除的3种高效方法

删除JavaScript数组中的指定元素，有多种方法，各有优劣。最常用的包括splice()、filter()，以及ES6引入的findIndex()结合splice()。选择哪种方法取决于具体场景，比如是否需要修改原数组，或者删除元素的条件是否复杂。

解决方案

删除数组元素，核心在于找到要删除的元素，然后将其从数组中移除。以下详细介绍三种高效方法，并分析它们的适用场景和潜在问题。

如何使用splice()删除指定元素？

splice()方法直接修改原数组，可以删除、替换、添加元素。它的通用性很强，但直接修改原数组可能会带来一些副作用，需要注意。

用法：

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3); // 找到要删除的元素的索引

if (index > -1) {
  arr.splice(index, 1); // 从索引index开始删除1个元素
}

console.log(arr); // 输出: [1, 2, 4, 5]

优点：

直接修改原数组，无需创建新数组。
简单直接，代码量少。

缺点：

直接修改原数组，可能影响其他引用该数组的代码。
如果数组较大，且删除操作频繁，可能会影响性能。
indexOf()只能查找第一个匹配的元素，如果数组中有多个相同的元素需要删除，则需要循环查找。

注意事项：

splice()的第二个参数表示要删除的元素个数，即使只删除一个元素，也必须传入1。如果传入0，则不会删除任何元素。

如何使用filter()创建新数组删除指定元素？

filter()方法创建一个新数组，包含所有通过测试的元素。它不会修改原数组，更安全，但会创建新数组，可能消耗更多内存。

用法：

let arr = [1, 2, 3, 4, 5, 3];
let valueToRemove = 3;

let newArr = arr.filter(item => item !== valueToRemove);

console.log(newArr); // 输出: [1, 2, 4, 5]
console.log(arr); // 输出: [1, 2, 3, 4, 5, 3] (原数组未改变)

优点：

不会修改原数组，更安全。
可以删除所有匹配的元素。
可以使用更复杂的条件来删除元素。

缺点：

需要创建新数组，可能消耗更多内存。
相对于splice()，代码量稍多。

适用场景：

当需要保留原数组，或者需要删除所有匹配的元素时，filter()是一个不错的选择。

如何结合findIndex()和splice()删除指定元素？

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。结合splice()，可以先找到元素的索引，然后再删除它。

用法：

let arr = [{id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'C'}];
let idToRemove = 2;

let index = arr.findIndex(item => item.id === idToRemove);

if (index > -1) {
  arr.splice(index, 1);
}

console.log(arr); // 输出: [{id: 1, name: 'A'}, {id: 3, name: 'C'}]

优点：

可以根据对象的属性来删除元素。
代码清晰易懂。

缺点：

需要先找到元素的索引，然后再删除它，稍微繁琐。
直接修改原数组，可能影响其他引用该数组的代码。

适用场景：

当数组中的元素是对象，需要根据对象的属性来删除元素时，findIndex()结合splice()是一个不错的选择。它比filter()更高效，因为filter()需要遍历整个数组，而findIndex()只需要找到第一个匹配的元素即可。

如何删除数组中重复的指定元素？

如果数组中有多个重复的指定元素，且需要全部删除，可以使用while循环结合indexOf()或filter()。

使用while循环和splice()：

let arr = [1, 2, 3, 4, 5, 3, 3];
let valueToRemove = 3;

let index = arr.indexOf(valueToRemove);
while (index > -1) {
  arr.splice(index, 1);
  index = arr.indexOf(valueToRemove); // 每次删除后都要重新查找
}

console.log(arr); // 输出: [1, 2, 4, 5]

使用filter()：

（同上文filter()的例子）

选择：

while循环结合splice()直接修改原数组，效率更高，但需要注意副作用。filter()创建新数组，更安全，但可能消耗更多内存。