使用JavaScript移除数组指定条目时出现残留问题

这个坑我之前踩过！你用forEach结合splice删除元素时总有残留，核心原因是循环过程中修改了原数组的长度和元素位置，导致索引错乱。

咱们拆解下你代码的执行过程就懂了：

1. 初始数组有3个元素，索引对应0、1、2。
2. 第一次循环处理索引0的元素，符合删除条件，用splice删掉它后，数组变成[原索引1的元素, 原索引2的元素]。
3. forEach的循环索引会自动递增到1，但此时数组长度已经变成2，索引1对应的是原数组的第三个元素，中间的那个元素（原索引1）直接被跳过了，自然删不干净。

下面给你几个靠谱的解决方案：

方案1：用filter方法（最推荐） #

filter是数组原生方法，会返回一个新数组，只包含符合筛选条件的元素。这种方式不修改原数组，代码简洁易读：

var messages = [ { user:1, message:'hello' }, { user:1, message:'hello' }, { user:1, message:'hello' } ];
// 筛选出user不等于1的元素，得到新数组
var filteredMessages = messages.filter(function(message) {
  return message.user !== 1;
});
// 如果需要替换原数组，直接赋值即可
messages = filteredMessages;

方案2：倒序循环删除 #

从数组最后一个元素开始往前遍历，删除前面的元素不会影响后续循环的索引：

var messages = [ { user:1, message:'hello' }, { user:1, message:'hello' }, { user:1, message:'hello' } ];
for (var i = messages.length - 1; i >= 0; i--) {
  if (messages[i].user === 1) {
    messages.splice(i, 1);
  }
}

方案3：正序循环并调整索引 #

如果一定要用正序循环，删除元素后把索引减1，避免跳过下一个元素：

var messages = [ { user:1, message:'hello' }, { user:1, message:'hello' }, { user:1, message:'hello' } ];
for (var i = 0; i < messages.length; i++) {
  if (messages[i].user === 1) {
    messages.splice(i, 1);
    i--; // 删除后索引回退一位，确保下一次循环能处理到下一个元素
  }
}

个人最推荐第一种filter的方式，它更符合现代JavaScript的函数式编程风格，也能避免修改原数组带来的潜在问题。

内容的提问来源于stack exchange，提问作者OrpheuZ