JS删除数组元素的4种常用方法

本篇文章给大家分享《JS删除数组元素的几种方法》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

移除 JavaScript 数组中的某个元素，核心方法有两种：1. 使用 splice() 方法可直接修改原数组，适用于已知索引且需在原数组上操作的场景；2. 使用 filter() 方法可创建新数组，适用于根据条件移除元素或需保持原数组不变的场景。若要移除所有指定值的元素，推荐使用 filter() 方法，因其能通过回调函数精确筛选符合条件的元素并生成新数组。根据索引移除元素时需注意：使用 splice() 应避免在正向循环中删除元素以防索引错位，建议倒序遍历或使用 filter()；同时应检查索引有效性以防止无效操作。不推荐使用 delete 操作符，因其仅将元素置为 undefined 但不改变数组长度，会留下空洞导致遍历异常和逻辑错误，且不符合数组元素移除的语义，应优先选用 splice() 或 filter() 以确保数组结构的完整性和代码的可预测性。

移除 JavaScript 数组中的某个元素，这事儿看似简单，实则门道不少。核心思路其实就那么几个：要么是直接在原数组上动刀子（修改它），要么是干脆利落地甩掉旧的，重新生成一个没有那个元素的新数组。这两种做法，各有各的适用场景，没有绝对的好坏，只看你手头的活儿更适合哪一种。

解决方案

在 JavaScript 里，要移除数组的某个元素，我们最常用也最推荐的方法主要有两种：splice() 和 filter()。它们各有侧重，理解它们的区别能让你在实际开发中少走弯路。

1. 使用 splice() 方法（修改原数组）

splice() 是一个非常强大的数组方法，它可以用于添加、删除或替换数组中的元素。当用于删除时，它会直接修改原数组。

语法：array.splice(start, deleteCount, item1, item2, ...)

• start: 必需。规定从何处开始删除或添加元素。
• deleteCount: 必需。规定应该删除多少元素。
• item1, item2, ...: 可选。要添加到数组的新元素。

移除单个元素通常是这样：

let fruits = ['apple', 'banana', 'orange', 'grape'];
let indexToRemove = 1; // 移除 'banana' (索引为1)

fruits.splice(indexToRemove, 1);
console.log(fruits); // 输出: ['apple', 'orange', 'grape']

这种方法直接且高效，特别是当你已经知道要移除元素的精确索引时。但要注意，它会改变原数组，这在某些场景下（比如你在处理 React/Vue 的状态时）可能不是你想要的行为。

2. 使用 filter() 方法（创建新数组）

filter() 方法不会修改原数组，而是创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。如果你想根据某个条件移除元素（比如移除所有值为 'apple' 的元素），或者你想保持原数组不变，filter() 是一个非常优雅的选择。

语法：array.filter(callback(element, index, array))

callback 函数对数组中的每个元素执行一次。如果 callback 返回 true，则该元素包含在新数组中；如果返回 false，则不包含。

移除特定值的元素：

let colors = ['red', 'green', 'blue', 'red', 'yellow'];
let valueToRemove = 'red';

let newColors = colors.filter(color => color !== valueToRemove);
console.log(newColors); // 输出: ['green', 'blue', 'yellow']
console.log(colors);    // 输出: ['red', 'green', 'blue', 'red', 'yellow'] (原数组未变)

这种方式的优点是“纯粹”：它不产生副作用，总是返回一个新数组。这在函数式编程或需要不可变数据的场景下非常有用。

JavaScript 中如何移除数组中所有指定值的元素？

当你的需求是“把数组里所有某个特定值都踢出去”的时候，filter() 方法几乎是你的不二之选。前面提到了，filter() 的工作原理就是遍历数组的每一个元素，然后根据你给定的条件来决定这个元素是不是要保留在新数组里。所以，如果你的条件是“这个元素不等于我要移除的那个值”，那么所有等于那个值的元素自然就不会被包含在新数组里了。

比如，我们有一个列表，里面可能重复出现一些项，现在想把所有“过期”的项都清理掉：

const todoList = [
    { id: 1, task: '学习 JS', status: '进行中' },
    { id: 2, task: '整理文档', status: '已完成' },
    { id: 3, task: '购买食材', status: '进行中' },
    { id: 4, task: '检查邮件', status: '已完成' }
];

const statusToRemove = '已完成';

const activeTasks = todoList.filter(item => item.status !== statusToRemove);

console.log(activeTasks);
/*
输出:
[
  { id: 1, task: '学习 JS', status: '进行中' },
  { id: 3, task: '购买食材', status: '进行中' }
]
*/
console.log(todoList); // 原数组 todoList 未变，这很重要

这里我们没有直接比较字符串，而是比较了对象属性的值。filter() 的强大之处就在于它的回调函数可以处理任何复杂的逻辑，不仅仅是简单的值比较。它能让你以声明式的方式表达“我想要什么”，而不是“我该怎么一步步操作”。

根据索引精确移除数组元素，有哪些需要注意的地方？

通过索引移除元素，通常我们会想到 splice()。它直接在原数组上操作，效率很高，特别是当你只移除少数几个元素时。但用它的时候，有几个细节是需要留意的。

首先，splice() 会改变原数组的长度和内容。这意味着，如果你在一个循环里，正向遍历并同时移除元素，可能会出现问题。因为当你移除一个元素后，它后面的所有元素的索引都会向前移动。

举个例子，假设你想移除数组中所有偶数索引的元素：

let numbers = [10, 20, 30, 40, 50];

// 错误的循环方式
for (let i = 0; i < numbers.length; i++) {
    if (i % 2 === 0) { // 如果是偶数索引
        numbers.splice(i, 1);
    }
}
console.log(numbers); // 输出: [20, 40] - 结果不对，30和50没被移除

这里的问题是，当 i=0 时，10 被移除，数组变成 [20, 30, 40, 50]，20 的新索引是 0。下一次循环 i 变成 1，此时 30 的索引是 1，20 就被跳过了。

正确的做法是倒序遍历，或者使用 filter() (如果条件允许)：

倒序遍历并移除：

let numbersCorrect = [10, 20, 30, 40, 50];
for (let i = numbersCorrect.length - 1; i >= 0; i--) {
    if (i % 2 === 0) {
        numbersCorrect.splice(i, 1);
    }
}
console.log(numbersCorrect); // 输出: [20, 40] - 这次对了

倒序遍历时，元素的索引变化不会影响到你接下来要处理的元素。

处理不存在的索引：

如果你尝试用 splice() 移除一个超出数组范围的索引，它不会报错，但也不会有任何效果：

let items = ['A', 'B', 'C'];
items.splice(5, 1); // 索引5不存在
console.log(items); // 输出: ['A', 'B', 'C'] - 数组没变

虽然不报错，但在实际应用中，你可能需要先检查索引的有效性，以避免不必要的函数调用或逻辑错误。

移除数组元素时，delete 操作符为什么不推荐使用？

在 JavaScript 里，delete 操作符确实可以用来删除对象的属性，而数组在本质上也是一种特殊的对象，它的索引就是属性名。所以，你可能会看到有人尝试用 delete 来移除数组元素：

let data = ['alpha', 'beta', 'gamma'];
delete data[1]; // 尝试删除 'beta'
console.log(data); // 输出: ['alpha', <1 empty item>, 'gamma']
console.log(data.length); // 输出: 3

从输出你可以看到，data[1] 的值确实没了，变成了 <1 empty item>，或者说 undefined。但数组的长度 length 属性却保持不变！这就是 delete 操作符用于数组时最大的陷阱和不推荐使用的原因。

为什么不推荐？

1. 留下“空洞” (Sparse Array)： delete 并没有真正地移除数组元素，它只是将那个位置的值设为 undefined。数组的结构并没有改变，那个索引位置依然存在，只是值没了。这会导致数组变成一个“稀疏数组”（sparse array）。
2. length 属性不变： 这是最麻烦的一点。因为 length 没变，当你遍历数组时（比如用 for 循环），你仍然会遍历到那个 undefined 的位置，这可能导致你的逻辑出错。很多数组方法（如 map, forEach, filter 等）在处理稀疏数组时行为可能不一致，或者产生意料之外的结果。
3. 语义不清： delete 更多是用于删除对象属性，用在数组上容易造成误解。它不是为数组元素移除设计的，而 splice() 和 filter() 才是专门为数组操作而生的。

简单来说，如果你需要从数组中移除一个元素，让数组的长度随之改变，并且后续的元素向前填充，那么 delete 根本无法满足你的需求。它更像是在数组里挖了个坑，而不是把东西搬走。所以，为了代码的健健壮性和可预测性，请始终优先选择 splice() 或 filter() 来处理数组元素的移除。

终于介绍完啦！小伙伴们，这篇关于《JS删除数组元素的4种常用方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！