数组撤销删除操作后最后元素为undefined的原因排查求助

为什么会出现undefined和数组空位？ #

咱们先拆解你的代码逻辑，看看问题出在哪儿：

1. undoFunc(2)时出现undefined的核心原因

当你调用undoFunc(2)时，此时testUndo是['Sun','Saturn','Mars']（对应三次删除的顺序），满足if(undo >=1 && undo < testUndo.length)的条件，进入循环。循环条件是j <= undo，也就是j会取0、1、2三个值：

• j=0：取出testUndo[0]（'Sun'）添加到testLista，然后用splice(0,1)删掉它，此时testUndo变成['Saturn','Mars']。
• j=1：取出testUndo[1]（'Mars'）添加到testLista，再用splice(1,1)删掉它，testUndo变成['Saturn']。
• j=2：此时testUndo的长度只有1，testUndo[2]不存在，返回undefined，你把这个undefined添加到了testLista，这就是最后一个元素为undefined的原因。而且splice(2,1)因为索引超出数组范围，根本不会修改testUndo，导致'Saturn'还留在里面。

2. 数组空位的来源

正常情况下用testLista[testLista.length] = xxx赋值不会产生空位，但如果xxx是undefined（比如上面的场景），就会在数组末尾添加一个undefined元素，看起来像空位。另外，如果testUndo数组因为手动维护索引i出现了索引不连续的情况，也会导致取出undefined，进而产生空位。

修正后的代码 #

核心思路是：

• 撤销操作应该按删除的逆序恢复（先删的后恢复），避免索引错乱。
• 用push存储删除的元素，代替手动维护索引，保证数组连续无空位。
• 批量处理要恢复的元素，避免循环中修改数组长度导致的逻辑错误。

let testLista = ['Mars', 'Jupiter', 'Saturn', 'Sun'];
let testUndo = [];

const delItem = del => {
  const indexOfDel = testLista.indexOf(del);
  if (indexOfDel !== -1) {
    // 直接用splice的返回值获取删除的元素，更可靠
    const deleted = testLista.splice(indexOfDel, 1)[0];
    document.write(`<h3>Deleted: <em>${del}</em></h3>`);
    testUndo.push(deleted); // 用push存储，自动维护数组顺序
    console.log('delItem() undo - ', testUndo);
    console.log('delItem() list - ', testLista);
  } else {
    document.write(`<h2>That item does not exist! Available items: <em>${testLista.join(', ')}</em></h2>`);
  }
};

delItem('Sun');
delItem('Saturn');
delItem('Mars');

const undoFunc = (undoCount) => {
  // 处理边界：避免传入无效的撤销数量
  const actualCount = Math.min(undoCount, testUndo.length);
  if (actualCount === 0) {
    console.log('Nothing to undo!');
    return;
  }

  // 取出最近删除的N个元素（从数组末尾取）
  const itemsToUndo = testUndo.splice(-actualCount);
  // 批量添加回原数组（若要按原顺序恢复，可调用itemsToUndo.reverse()）
  testLista.push(...itemsToUndo);
  
  console.log('Undone items:', itemsToUndo);
  console.log('Updated list:', testLista);
};

// 测试撤销2个元素
undoFunc(2);

关键优化点 #

• 用testUndo.push(deleted)代替testUndo[i] = del，省去手动维护索引i的麻烦，保证testUndo是连续无空位的数组。
• 撤销时用splice(-actualCount)直接取出最后actualCount个元素（最近删除的元素），批量添加回原数组，避免循环中修改数组导致的索引错乱。
• 增加了边界处理，防止传入0或超过已删除元素数量的无效参数。

这样修改后，调用undoFunc(2)会正确恢复最近删除的2个元素（'Mars'和'Saturn'），不会再出现undefined或数组空位的问题。

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