JS中for循环内使用splice按位置插入元素功能异常如何解决

问题原因 #

splice插入元素会自动增加数组长度，导致插入位置后的所有元素索引后移。原代码按从小到大的顺序处理插入位置，前面的插入操作会让后续待插入的位置和真实索引错位，最终无法得到预期结果。

修改方案 #

处理每个用户的插入位置时，先把数字类型的位置转为0-based编号，再按从大到小排序，优先插入靠后的位置，这样靠后的插入操作不会影响前面位置的索引准确性。last位置统一放到所有数字位置插入完成后再处理，避免干扰数字位置的索引计算。

修改后代码 #

var list = ['x','x','x','x','x','x','x','x','x','x'];
var data = [{name:'tester1',position:'4,5,9,last'},{name:'tester2',position:'3,5,8,last'}]

for (var i=0; i<data.length; i++){
  var position = data[i].position.split(",");
  var name = data[i].name;
  var numPositions = [];
  var hasLast = false;
  // 分离数字位置和last位置
  for (var x=0; x<position.length; x++){
    if(!isNaN(position[x])){
      numPositions.push(Number(position[x]) - 1);
    }else{
      hasLast = true;
    }
  }
  // 数字位置从大到小排序，避免插入操作影响未处理的位置索引
  numPositions.sort((a,b) => b - a);
  // 批量插入数字位置
  for (var pos of numPositions) {
    list.splice(pos, 0, name);
  }
  // 最后处理last位置插入
  if (hasLast) {
    list.push(name);
  }
}

console.log('list',list)

运行上述代码输出的数组和你给出的预期结果完全一致。

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