纯JavaScript实现点击按钮动态增删数组值的逻辑异常问题求解

异常行为诱因 #

• 循环逻辑完全错误：for循环的判断条件array.length + 1永远为真，且循环体执行第一次就会触发break，实际上代码只会检查数组下标为0的元素，根本不会遍历整个数组查找匹配值。
• 判断逻辑错误：只要数组第0位元素不等于当前点击值，就直接执行push操作，完全忽略数组其他位置是否已经存在该值，导致点击不同按钮时会重复插入数据，仅当点击值刚好位于数组第0位时才会触发删除逻辑。
• 变量i未声明，意外泄露为全局变量，属于不良代码实践。

修复后的纯JS实现 #

const buttons = document.querySelectorAll('.string')
const array = []

buttons.forEach(el => el.addEventListener('click', () => {
  const value = el.innerHTML.trim()
  const existIndex = array.indexOf(value)
  if (existIndex > -1) {
    // 已存在，删除对应项
    array.splice(existIndex, 1)
    console.log('deleted', array)
  } else {
    // 不存在，新增
    array.push(value)
    console.log('added', array)
  }
}))

修复逻辑说明：直接通过indexOf遍历全数组查找目标值的位置，存在则调用splice删除对应下标项，不存在则直接插入，不需要额外的遍历、删除空值操作，逻辑更简洁高效。

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