使用filter()方法可创建一个不包含特定元素的新数组，且不改变原数组，适用于需要保持原数组不变的场景；2. 使用splice()方法可直接在原数组上删除指定元素，需先通过indexof()或findindex()获取索引，适用于需原地修改数组的场景；3. 删除多个相同元素时，filter()更简洁安全，splice()需从后往前遍历或结合while循环以避免索引偏移；4. 删除对象数组中的特定对象时，应根据唯一标识属性（如id）使用filter()或findindex()结合splice()进行操作，因对象比较基于引用而非值。综上，filter()因其不可变性和代码清晰性在多数场景下更推荐使用。
在JavaScript中删除数组中的特定元素，通常有两种主流且各有侧重的方法：
filter()
方法和
splice()
方法。简单来说，如果你希望得到一个不包含特定元素的新数组，同时不改变原数组，那么
filter()
是你的首选。而如果你需要直接在原数组上进行修改，删除指定元素，
splice()
则更为直接。选择哪一个，往往取决于你对原数组是否需要保持不变的考量。
解决方案
要删除JavaScript数组中的特定元素，我们主要依赖
filter()
和
splice()
这两个内置方法。它们各自有不同的应用场景和工作方式。
1. 使用
filter()
方法（推荐用于创建新数组）
立即学习“Java免费学习笔记（深入）”；
filter()
方法不会改变原始数组，而是返回一个新数组，其中包含通过你提供的测试函数的所有元素。这在很多现代JavaScript开发中非常受欢迎，因为它遵循了“不可变性”的原则，尤其是在状态管理（如React或Vue）中。
// 示例：删除所有值为 'apple' 的元素const fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];const filteredFruits = fruits.filter(item => item !== 'apple');console.log(filteredFruits); // 输出: ['banana', 'orange', 'grape']console.log(fruits); // 输出: ['apple', 'banana', 'orange', 'apple', 'grape'] (原数组未变)// 示例：删除特定数字const numbers = [1, 2, 3, 4, 3, 5];const numbersWithoutThree = numbers.filter(num => num !== 3);console.log(numbersWithoutThree); // 输出: [1, 2, 4, 5]
filter()
的优点在于它的简洁性与安全性，你不用担心意外修改到原数据，这在复杂应用中能避免很多难以追踪的bug。
2. 使用
splice()
方法（推荐用于原地修改数组）
splice()
方法会直接修改原始数组，通过删除或替换现有元素，或者添加新元素来改变数组内容。如果你知道要删除元素的索引，
splice()
非常高效。但如果只知道元素的值，你需要先找到它的索引。
// 示例：删除第一个值为 'apple' 的元素const fruitsSplice = ['apple', 'banana', 'orange', 'apple', 'grape'];const indexToRemove = fruitsSplice.indexOf('apple'); // 找到第一个 'apple' 的索引if (indexToRemove !== -1) { // 确保元素存在 fruitsSplice.splice(indexToRemove, 1); // 从该索引开始删除1个元素}console.log(fruitsSplice); // 输出: ['banana', 'orange', 'apple', 'grape'] (原数组已变)// 示例：删除特定数字（如果数组中有多个相同值，只会删除第一个）const numbersSplice = [1, 2, 3, 4, 3, 5];const indexNumToRemove = numbersSplice.indexOf(3);if (indexNumToRemove !== -1) { numbersSplice.splice(indexNumToRemove, 1);}console.log(numbersSplice); // 输出: [1, 2, 4, 3, 5]
splice()
的强大之处在于它能直接操作内存中的数组对象，但这也意味着你需要更小心地管理索引，尤其是在循环中删除多个元素时，索引会发生变化。
使用filter()方法删除元素：保留原数组还是创建新数组？
这其实是很多开发者在处理数组时面临的一个核心选择。
filter()
方法天生就是为“创建新数组”而设计的，它不会触碰你传入的原始数组。在我看来，这种“不可变性”在现代前端开发中越来越重要。想想看，当你的数据流是单向的，或者你使用了像Redux、Vuex这样的状态管理库时，每一次状态更新都应该产生一个新的状态副本，而不是直接修改旧的状态。
filter()
完美契合了这一点。
比如，你有一个用户列表，用户可以筛选或删除。如果你直接修改原列表，那么你可能需要手动备份它，或者在某些情况下，其他依赖这个列表的组件会突然发现数据变了，导致不可预测的行为。但如果用
filter()
，每次操作都返回一个新列表，那么原列表始终是稳定的，你可以随时回溯，或者轻松地进行撤销/重做操作，因为它没有被“污染”。
// 假设这是你的应用状态中的一部分let activeUsers = [ { id: 1, name: 'Alice', status: 'online' }, { id: 2, name: 'Bob', status: 'offline' }, { id: 3, name: 'Charlie', status: 'online' }];// 需求：删除ID为2的用户const usersAfterDeletion = activeUsers.filter(user => user.id !== 2);console.log(usersAfterDeletion);/*[ { id: 1, name: 'Alice', status: 'online' }, { id: 3, name: 'Charlie', status: 'online' }]*/console.log(activeUsers); // 原数组 activeUsers 保持不变/*[ { id: 1, name: 'Alice', status: 'online' }, { id: 2, name: 'Bob', status: 'offline' }, { id: 3, name: 'Charlie', status: 'online' }]*/
这种模式让代码更容易理解，更少出错，尤其是在团队协作和大型项目中，它能显著提升代码的可维护性。你几乎可以把
filter()
看作是“给我一个满足特定条件的新列表”，而不是“去修改那个旧列表”。
使用splice()方法删除元素：原地修改的考量
splice()
方法则完全是另一种哲学：它直接在原数组上动刀。这就像你在一个文件里直接删除了几行文字，而不是复制一份文件再删除。它的优点是性能，因为它不需要创建新的数组，特别是在处理非常大的数组时，可以节省内存和计算资源。但这份“直接”也带来了额外的复杂性。
最常见的考量就是“索引偏移”。如果你在一个循环中，从前往后遍历并使用
splice()
删除元素，那么每次删除都会导致后续元素的索引前移。这会让你跳过一些元素，或者删除错误的元素。
阿里云-虚拟数字人
阿里云-虚拟数字人是什么？ …
2 查看详情
// 糟糕的例子：尝试删除所有偶数，但会出错const numbersToModify = [1, 2, 3, 4, 5, 6];for (let i = 0; i = 0; i--) { if (numbersToModifyCorrect[i] === valueToDelete) { numbersToModifyCorrect.splice(i, 1); }}console.log(numbersToModifyCorrect); // 输出: [1, 2, 4, 5] (正确删除了所有3)// 另一种正确的方法：结合 indexOf 和 while 循环const numbersToModifyWhile = [1, 2, 3, 4, 3, 5];let idx = numbersToModifyWhile.indexOf(3);while (idx !== -1) { numbersToModifyWhile.splice(idx, 1); idx = numbersToModifyWhile.indexOf(3); // 再次查找，因为数组已改变}console.log(numbersToModifyWhile); // 输出: [1, 2, 4, 5]
所以，尽管
splice()
很强大，但它要求你对数组的内部机制有更深的理解，尤其是在处理多个相同元素或循环删除时。在我看来，如果不是对性能有极致要求，或者确实需要原地修改数据，我个人更倾向于使用
filter()
，因为它在思维上更简单，更不容易出错。
删除多个相同特定元素的高效策略
当你需要从数组中删除所有出现的某个特定元素时，
filter()
方法无疑是最简洁、最不易出错的选择。它天然就能处理这种情况，因为它是遍历数组中的每一个元素，并根据条件决定是否将其包含在新数组中。它不会受到索引变化的影响。
const itemsWithDuplicates = ['apple', 'banana', 'orange', 'apple', 'grape', 'apple'];const itemsWithoutApple = itemsWithDuplicates.filter(item => item !== 'apple');console.log(itemsWithoutApple); // 输出: ['banana', 'orange', 'grape']// 无论 'apple' 出现多少次，都会被排除。
如果你坚持要用
splice()
来原地删除所有相同的特定元素，那么你必须非常小心地处理索引。上面在
splice()
部分提到的“从后往前遍历”或“结合
indexOf
和
while
循环”就是为此而生的策略。从后往前遍历可以避免因为删除元素导致后续元素索引前移的问题，因为它总是操作那些尚未被访问到的元素。
indexOf
结合
while
循环则是在每次删除后，重新查找目标元素的当前位置。
// 再次强调，filter 在这种场景下更推荐// 但如果非要用 splice 且要原地修改，这是方法之一const numbersWithManyThrees = [1, 3, 2, 3, 4, 3, 5];const valueToRemove = 3;let i = numbersWithManyThrees.length; // 从数组末尾开始while (i--) { // i 会从 length-1 递减到 0 if (numbersWithManyThrees[i] === valueToRemove) { numbersWithManyThrees.splice(i, 1); }}console.log(numbersWithManyThrees); // 输出: [1, 2, 4, 5]
选择哪种策略，说到底还是一个平衡：是选择代码的简洁性和安全性（
filter()
），还是选择可能更高的性能和原地修改（
splice()
，但需要更复杂的逻辑来保证正确性）。在绝大多数业务场景中，
filter()
带来的代码清晰度收益，远大于
splice()
可能带来的微弱性能提升。
当数组包含对象时，如何删除特定对象？
当数组中存储的是对象而不是原始值（字符串、数字）时，删除特定元素会变得稍微复杂一些，因为JavaScript中对象的比较是基于引用的，而不是基于值的。这意味着，
{ id: 1 } === { id: 1 }
的结果是
false
，因为它们是两个不同的对象实例，即使它们的属性完全相同。
因此，你不能简单地用
filter(item => item !== someObject)
或
indexOf(someObject)
来删除一个“看起来一样”的对象。你需要一个判断对象“相等”的逻辑。通常，我们会根据对象的一个或多个唯一标识属性来判断。
1. 根据唯一ID或其他属性删除（最常见）
这是最实用的方法。如果你的对象有唯一的标识符（比如
id
），你可以用它来筛选。
const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];// 需求：删除ID为2的用户const userIdToDelete = 2;const updatedUsers = users.filter(user => user.id !== userIdToDelete);console.log(updatedUsers);/*[ { id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' }]*/console.log(users); // 原数组未变
这种方法同样适用于
splice()
，但你需要先找到那个唯一ID对应的对象的索引：
const usersSplice = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];const targetId = 2;const indexToDelete = usersSplice.findIndex(user => user.id === targetId);if (indexToDelete !== -1) { usersSplice.splice(indexToDelete, 1);}console.log(usersSplice);/*[ { id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' }]*/
这里我们用了
findIndex()
，它返回数组中满足提供的测试函数的第一个元素的索引，如果没有找到则返回-1。这比
indexOf()
更适合查找对象。
2. 删除特定的对象引用
如果你手里已经有了要删除的那个对象实例的引用，那么你可以直接用这个引用来比较：
const items = [ { value: 'A' }, { value: 'B' }, { value: 'C' }];const itemToDelete = items[1]; // 获取对第二个对象的引用const newItems = items.filter(item => item !== itemToDelete);console.log(newItems); // 输出: [{ value: 'A' }, { value: 'C' }]
这种场景相对少见，通常你不会直接拿到一个数组内部对象的引用然后去删除它，除非是在一些特定的数据结构操作中。但在概念上，了解这一点很重要。
总的来说，处理对象数组的删除，关键在于定义“特定”的含义。大多数时候，这个“特定”指的是某个具有特定属性值的对象，而不是内存中的某个特定对象引用。因此，基于属性的
filter()
或
findIndex()
结合
splice()
是你的主要工具。
以上就是javascript怎么删除数组中的特定元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/220296.html
微信扫一扫 
支付宝扫一扫 
