使用map遍历删除数组无效对象时元素被异常跳过的原因及解决方案

• 首先是API用法错配：map的设计初衷是对原数组每一个元素做映射处理、返回一个等长的新数组，并非用来承担循环遍历+原地删除元素的副作用任务，这种用法本身就偏离了API的设计语义。
• 其次是动态修改数组导致的索引错位：map本身不会主动跳过任何元素，它的遍历逻辑是在遍历启动时基于初始数组长度固定索引递增规则的，不会在遍历过程中因为数组长度变化动态调整索引。漏删的具体触发逻辑可对照你给出的示例还原：
  1. 初始数组索引对应：[0: {id:11}, 1:{id:13}, 2:{id:1}, 3:{id:4}]
  2. 首次遍历到i=0的元素，判定id=11无效，执行splice删除索引0的元素。数组立刻收缩，原索引1位置的id=13元素自动前移到索引0位置，此时数组变为[0:{id:13}, 1:{id:1}, 2:{id:4}]
  3. map的遍历计数器按固定规则自增到i=1，直接索引到当前数组里位置为1的id=1元素，完全跳过了刚移到索引0位置的id=13元素
  4. 后续遍历持续按固定索引偏移推进，id=13的元素全程没有被校验到，最终保留在数组中。

• 最优方案：使用Array.filter实现筛选
  这个API的设计目的就是按条件过滤数组，完全不存在原地修改导致的索引错位问题，还能避免无意义的性能损耗：

  const filterData = () => {
    // 提前将mapping的键转为Set，把includes的O(n)查询降为O(1)
    const validIdSet = new Set(Object.keys(mapping));
    // 生成筛选后的新数组
    const filteredData = data.filter(item => validIdSet.has(item.id.toString()));
    console.log("updated data", filteredData);
    // 如果需要直接修改原引用的data数组，可以执行：
    // data.length = 0;
    // data.push(...filteredData)
  }
  

• 特殊场景：必须原地遍历删除时，采用倒序遍历逻辑
  如果因为业务约束必须在原数组上做删除操作，不要正序遍历，改为从数组末尾向开头遍历：删除靠后位置的元素时，靠前元素的索引不会发生移位，从根源上避免漏删问题。注意这种场景下不要用map，直接用普通for循环即可：

  const filterData = () => {
    for (let i = data.length - 1; i >= 0; i--) {
      const item = data[i];
      const isValid = Object.keys(mapping).includes(item.id.toString());
      if (!isValid) {
        data.splice(i, 1);
      }
    }
    console.log("updated data", data);
  }
  

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