JS数组splice删除元素导致跳过项的解决方案

splice删除元素的基本逻辑

首先介绍相关背景知识。

// splice:返回从原始数组中删除的项（如果没有任何删除，则返回空数组）
    // 当指定2个参数时，表示删除
    // 当指定3个参数，且第2个参数为0时表示插入
    // 当指定3个参数，且第2个参数为1时表示替换

以删除操作为例，若要移除数组中指定的元素，需先确定其在数组中的索引位置。通常使用数组的indexOf方法获取该索引，随后调用splice方法进行删除。

这一思路在理论上是可行的。

具体实现代码参考如下。

var arr = ["张三","李四","王五","赵六"];

// 删除王五
arr.splice(arr.indexOf("王五"),1);

循环中删除元素的索引偏移问题

然而，实际应用中会出现问题。

当此逻辑置于for循环中，例如遍历数组并在满足特定条件时删除元素，问题便显现出来。

在循环过程中，索引变量i每次递增1。但一旦执行splice删除元素，数组长度缩短，后续元素的索引位置前移。此时i继续加1，会导致原本紧邻的下一个元素被跳过，无法被检查或处理。

这是一个常见的开发陷阱。

修复方案：手动调整索引

为避免跳过元素，在删除操作后，需手动将索引变量i减1。这样在下一次循环递增时，i能正确指向当前应处理的元素。

具体场景如：遍历数组，当DasOperation属性值为“没变”时，从数组中移除该数据项，并执行i-1操作。

// 删除没有变化的，不传递到后台
for (let i = 0; i < this.CurrJobData.Content.length; i += 1) {
  if (this.CurrJobData.Content[i].DasOperation === '没变') {
    this.CurrJobData.Content.splice(this.CurrJobData.Content.indexOf(this.CurrJobData.Content[i]), 1);
    i -= 1;// 必须对i减去1，否则后面的一个元素会被跳过去
  }
}

分享此案例旨在帮助开发者避免类似陷阱，希望提供实用参考。

关于JavaScript数组splice删除元素时索引偏移问题的讨论至此结束。如需了解更多相关技巧，可查阅本站过往文章或继续阅读后续内容，感谢支持。