Undo按钮数组元素移除逻辑异常：总是返回最后添加的点

问题分析 #

你的Undo按钮逻辑存在两个关键错误：

• 执行newPoints.pop()移除最后一项后，又写了const newPoints = [...newPoints, popped]，把刚移除的元素又加回去了，等于没做任何移除操作
• 没有更新原始的pointsData数组，导致每次点击Undo都是基于完整的原数组重复操作，自然每次显示的都是所有圆点

修复后的代码 #

const pointsData = []
const redoPoints = []

container.addEventListener('click', (e) => {
   const positionX = e.clientX
   const positionY = e.clientY
   pointsData.push({ positionX, positionY })
   // 新增：有新操作时清空redo栈，避免历史redo干扰
   redoPoints.length = 0
   showList(pointsData)
})

const showList = (pointsArr) => {
   container.innerHTML = ""
   pointsArr.forEach(point => {
      container.innerHTML += `<div class="circle" style="left: ${point.positionX}px; top: ${point.positionY}px"></div>`
   })
}

undoButton.addEventListener('click', () => {
   if (pointsData.length > 0) {
      // 从主数组移除最后一项并存入redo栈
      const popped = pointsData.pop()
      redoPoints.push(popped)
      // 用更新后的主数组渲染
      showList(pointsData)
   }
})

修复说明 #

1. 去掉了错误的const newPoints = [...newPoints, popped]代码，确保移除的元素不会被重新加回去
2. 直接操作原始的pointsData数组：用pop()移除最后一项，同时把该元素存入redoPoints，这样下次Undo时主数组是已经移除后的状态
3. 新增了在点击添加圆点时清空redoPoints的逻辑——这是标准的撤销/重做逻辑：当有新的操作时，之前的重做历史就失效了，需要清空

这样修改后，点击Undo按钮就会正确移除最后添加的圆点，同时把它存入重做栈，多次点击会依次移除最近的圆点。

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