在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(); // 删除最后一个元素 3console.log(arr); // [1, 2]arr.shift(); // 删除第一个元素 1console.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如何删除数组中的特定元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517279.html
微信扫一扫 
支付宝扫一扫 
