JS删除数组元素的几种方法详解

本文深入解析了JavaScript中删除数组特定元素的多种方法，并针对不同场景给出了最佳实践建议。重点对比了`splice()`和`filter()`两种方法：`splice()`能直接修改原数组，但在循环删除多个元素时需注意索引变化；`filter()`则返回一个新数组，避免修改原数组，更适用于需要保持数据不变的场景。同时，文章也指出了`pop()`和`shift()`的局限性，以及应避免使用`delete`操作符。文章强调，选择合适的删除方法需综合考虑是否需要保留原数组、代码可读性以及性能需求，旨在帮助开发者在实际项目中选择最优方案，避免常见错误。

在JavaScript中删除数组特定元素，最常用的方法是使用splice()或filter()。1. 使用splice()方法可直接修改原数组，需先通过indexOf()找到元素索引，再调用splice(index, 1)删除该元素，但删除多个匹配项时需在循环中配合i--避免索引错位；2. 使用filter()方法可返回一个新数组，不改变原数组，通过条件筛选保留不匹配的元素，适用于需要保持原数组不变的场景；3. pop()和shift()仅适用于删除数组末尾或开头元素，不适用于任意位置的特定元素删除；4. 应避免使用delete操作符，因其仅将元素置为undefined而不改变数组长度，易导致稀疏数组问题。若需删除所有匹配元素，filter()更安全简洁；若需修改原数组且注重性能，splice()更直接，但需注意索引变化带来的影响。最终选择应基于是否需要保留原数组及代码可读性需求。

JavaScript里删除数组的特定元素，说实话，这事儿看似简单，但真要抠细节，还挺有意思的。核心在于，JS数组并没有一个像对象属性那样直接的delete操作符能彻底清除元素并缩短数组长度。如果你直接用delete array[index]，它只会把那个位置的值变成undefined，数组的长度和索引结构并不会变，这在很多场景下会是个“坑”。所以，我们通常会选择几种更“外科手术式”或“重新筛选式”的方法来达到目的。

在JS中删除数组特定元素，最直接和常用的方法是splice()，它能直接修改原数组。如果你不想修改原数组，那么filter()方法就是你的首选，它会返回一个全新的数组，包含你想要保留的元素。

解决方案

删除数组中的特定元素，通常我们有几种策略，每种都有其适用场景和一些需要注意的地方。

1. 使用 splice() 方法： 这是最直接修改原数组的方式。splice() 方法通过改变数组的内容来添加或删除元素。它的语法是 array.splice(start, deleteCount, item1, item2, ...)。 要删除特定元素，你通常需要先找到这个元素的索引。

let fruits = ['apple', 'banana', 'orange', 'grape', 'banana'];
let elementToDelete = 'banana';

// 找到第一个匹配的元素并删除
let index = fruits.indexOf(elementToDelete);
if (index !== -1) {
    fruits.splice(index, 1); // 从找到的索引开始，删除1个元素
}
console.log(fruits); // 输出: ['apple', 'orange', 'grape', 'banana'] - 注意，只删除了第一个'banana'

// 如果要删除所有匹配的元素，需要循环处理，并且要特别注意索引的变化
// 更好的做法是使用 filter，但如果非要用 splice 且修改原数组，可以这样做：
fruits = ['apple', 'banana', 'orange', 'grape', 'banana']; // 重置数组
for (let i = 0; i < fruits.length; i++) {
    if (fruits[i] === elementToDelete) {
        fruits.splice(i, 1);
        i--; // 删除后，当前索引位置的元素被后面的顶替了，所以需要将索引减1，确保下一个循环检查到新的元素
    }
}
console.log(fruits); // 输出: ['apple', 'orange', 'grape']

splice 就像是直接在数组上动刀子，效率高，但需要你小心处理索引，尤其是在循环中删除多个元素时，很容易因为索引的移动而漏掉一些元素。

2. 使用 filter() 方法： 如果你不想修改原数组，或者需要删除所有匹配的元素，filter() 是一个非常优雅的选择。它不会改变原数组，而是返回一个新数组，新数组中包含了所有通过你提供的测试函数的元素。

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

let newNumbers = numbers.filter(item => item !== valueToRemove);
console.log(newNumbers); // 输出: [1, 2, 4, 5]
console.log(numbers);   // 输出: [1, 2, 3, 4, 3, 5] - 原数组未改变

这种方式更符合函数式编程的理念，代码简洁易懂，且没有副作用。

3. 使用 pop() 或 shift() (特殊情况)： 这两个方法是用来删除数组末尾或开头的元素，所以它们不适用于“特定元素”的删除，除非你的“特定元素”恰好就在数组的两端。

let arr = [1, 2, 3];
arr.pop(); // 删除最后一个元素 3
console.log(arr); // [1, 2]

arr.shift(); // 删除第一个元素 1
console.log(arr); // [2]

这俩更多是队列或栈操作的场景。

4. 避免使用 delete 操作符： 前面提到了，delete array[index] 会将元素置为 undefined，但数组长度不变，这会创建“稀疏数组”。在大多数情况下，这不是我们想要的“删除”。

let colors = ['red', 'green', 'blue'];
delete colors[1];
console.log(colors);      // 输出: ['red', undefined, 'blue']
console.log(colors.length); // 输出: 3

所以，除非你有非常特殊的需求，否则别用它来删除数组元素。

如何在不改变原数组的情况下删除特定元素？

这几乎是JS数组操作中一个经典的需求，尤其是在现代前端框架，比如React、Vue中，我们经常强调“不可变性”（Immutability）。要做到这一点，filter() 方法就是不二之选。它提供了一种非破坏性的删除方式。

想象一下，你有一个用户列表，你想要从列表中移除某个用户，但又不想直接修改原始的用户数据源，因为可能还有其他地方依赖这个原始列表。这时，filter() 就派上用场了。

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

const userIdToRemove = 2;

// 创建一个新数组，不包含id为2的用户
const updatedUsers = users.filter(user => user.id !== userIdToRemove);

console.log('原始用户列表:', users);
// 原始用户列表: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ]

console.log('更新后的用户列表:', updatedUsers);
// 更新后的用户列表: [ { id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' } ]

// 你会发现，原始的 `users` 数组并没有被修改，这正是我们想要的。

filter() 的工作原理是遍历数组中的每个元素，并对每个元素执行你提供的回调函数。如果回调函数返回 true，那么当前元素就会被包含在新数组中；如果返回 false，则被排除。这种“筛选”的方式，完美地实现了不修改原数组的删除。它不仅适用于基本数据类型，处理对象数组时也同样强大，你只需要根据对象的某个属性来判断是否保留即可。

删除数组中所有匹配的特定元素，而不仅仅是第一个？

当数组中存在多个相同的元素，而你希望把它们全部请出去时，filter() 方法再次展现了它的优势。对比之下，如果用 splice() 来实现，你需要写一个循环，并且在每次删除后小心翼翼地调整循环索引，否则很容易出错。

我们来看一个例子，假设你有一个商品库存列表，其中有多种商品，你现在要把所有名为“旧款手机”的商品都移除掉：

const inventory = [
    { name: '新款手机', sku: 'A001' },
    { name: '旧款手机', sku: 'B002' },
    { name: '耳机', sku: 'C003' },
    { name: '旧款手机', sku: 'B003' },
    { name: '充电宝', sku: 'D004' },
    { name: '旧款手机', sku: 'B004' }
];

const itemToRemoveName = '旧款手机';

// 使用 filter 轻松删除所有匹配项
const updatedInventory = inventory.filter(item => item.name !== itemToRemoveName);

console.log('原始库存:', inventory);
// 原始库存: [ { name: '新款手机', sku: 'A001' }, { name: '旧款手机', sku: 'B002' }, ... ]

console.log('更新后库存 (所有旧款手机已移除):', updatedInventory);
/*
更新后库存: [
    { name: '新款手机', sku: 'A001' },
    { name: '耳机', sku: 'C003' },
    { name: '充电宝', sku: 'D004' }
]
*/

可以看到，一行 filter 代码就解决了问题，它自动处理了所有匹配项的筛选，你不需要关心内部的遍历和索引管理。

如果你非要用 splice 且需要修改原数组，那代码会复杂一些：

let numbersWithDuplicates = [1, 2, 3, 4, 3, 5, 3];
let valToRemove = 3;

for (let i = 0; i < numbersWithDuplicates.length; i++) {
    if (numbersWithDuplicates[i] === valToRemove) {
        numbersWithDuplicates.splice(i, 1);
        i--; // 关键一步：因为删除了元素，后续元素前移，所以要减小索引，确保下一个循环检查到当前位置的新元素
    }
}
console.log(numbersWithDuplicates); // 输出: [1, 2, 4, 5]

这种 splice 的循环方式虽然能实现，但确实不如 filter 直观和安全，一不小心 i-- 忘了写或者写错了位置，结果就可能不对。所以，删除所有匹配项，我个人是更倾向于 filter 的。

删除特定元素后，如何处理数组索引的变化？

当我们从数组中删除元素时，一个很实际的问题就是：数组的索引会发生什么变化？这取决于你使用的删除方法。理解这一点非常重要，因为它直接影响到你后续对数组的遍历或者其他基于索引的操作。

1. splice() 方法对索引的影响：splice() 是一个“原地修改”的方法。当你删除一个或多个元素时，它会立即从数组中移除这些元素，并且所有位于被删除元素之后的元素都会向前移动，填充被删除元素留下的空位。这意味着它们的索引会相应地减小。

let letters = ['a', 'b', 'c', 'd', 'e'];
console.log('原始数组:', letters); // ['a', 'b', 'c', 'd', 'e']

letters.splice(2, 1); // 删除索引为2的元素 'c'
console.log('删除后:', letters); // ['a', 'b', 'd', 'e']
console.log('新数组长度:', letters.length); // 4

// 此时，原来的 'd' (索引3) 变成了新的 'd' (索引2)
// 原来的 'e' (索引4) 变成了新的 'e' (索引3)

这种索引的变动，在循环遍历并删除元素时尤其需要注意。如果你不小心，可能会跳过一些元素或者在不正确的索引上操作。这就是为什么在上面 splice 循环删除所有匹配项的例子中，我们需要 i-- 来抵消索引前移的影响。

2. filter() 方法对索引的影响：filter() 方法则完全不同。它不会修改原始数组，而是创建一个全新的数组。这个新数组中的元素是原始数组中通过筛选条件的那些元素。因此，新数组的索引是从0开始重新排列的，与原数组的索引关系已经完全不同了。

let data = [10, 20, 30, 40, 50];
console.log('原始数据:', data); // [10, 20, 30, 40, 50]

let filteredData = data.filter(item => item !== 30);
console.log('筛选后数据:', filteredData); // [10, 20, 40, 50]

// 原始数组 `data` 保持不变，其索引结构也保持不变。
// 新数组 `filteredData` 有了全新的索引：
// 10 在 filteredData 中索引是 0
// 20 在 filteredData 中索引是 1
// 40 在 filteredData 中索引是 2 (在原数组中是 3)
// 50 在 filteredData 中索引是 3 (在原数组中是 4)

这种方式的好处是，它不会对原始数据造成任何“副作用”，你总是能得到一个干净的新数组。如果你在操作过程中需要保留原始数据的完整性，或者在复杂的异步操作链中，这种不变性是极其有价值的。

总的来说，如果你需要原地修改数组并且对性能有极致要求（虽然对于大多数应用来说，这点性能差异可以忽略），并且能小心处理索引，splice 是个好选择。但如果你更看重代码的简洁性、可读性，以及数据的不变性（这在现代Web开发中越来越重要），那么 filter 无疑是更优的方案。选择哪种方法，最终还是看你的具体需求和对代码风格的偏好。

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