if判断值为null时点击按钮仍删除数组元素问题求助

高频踩坑点 #

• 隐式类型转换/判断符号写错
  写条件时图省事用==而非===做判断，很容易被JS的隐式类型转换坑到——比如null == undefined返回true，会导致你以为拦住了null值，实际值为undefined的场景直接漏进分支；更常见的低级错误是把全等判断===写成了赋值符号=，或者干脆把判断条件写反，本来要拦住null结果反而放行了null。
  典型错误写法：

  // 错误：非严格判断会放通undefined
  if (delTarget != null) {
    arr.splice(delIndex, 1)
  }
  
  // 错误：把全等写成赋值，判断逻辑完全失效
  if (delTarget = selectedId) {
    arr.splice(delIndex, 1)
  }
  

• 代码块括号错配
  写if语句时漏加花括号是新手最高发的问题，JS默认只会把if后面紧跟的第一行代码归到判断分支里，后面写的删除逻辑实际和if判断是平级的，不管条件成不成立都会执行。
  典型错误写法：

  // 错误：if未加花括号，删除逻辑不受判断控制
  if (delTarget !== null)
    console.log('校验通过')
    arr.splice(delIndex, 1) // 这行无论判断结果如何都会跑
  

• 判断时机错位
  如果你的判断值是提前缓存好的，点击按钮触发时实际的目标值已经发生了变化，就会出现判断时拿到的值不是null、等执行到删除逻辑时值已经变成null，但删除流程已经启动的情况；如果逻辑里混了异步代码，也可能出现值被提前置空但删除逻辑已经进了执行栈的问题。
• 事件重复绑定
  如果删除按钮被多次绑定了点击回调，其中某一个回调没加null判断，哪怕你在当前写的判断分支里拦住了逻辑，另一个绑定的回调还是会正常执行数组删除操作，很多人排查半天都想不到是这个原因。

快速排查方法 #

1. 在if判断的第一行、删除逻辑执行的前一行各打一个断点，运行时逐行看两个位置拿到的判断变量实际值是什么，是不是和你预期的一致
2. 全量扫一遍判断语句，所有值比较统一用===严格全等，别用==，从根源上规避隐式转换的坑
3. 用编辑器格式化一遍代码，核对if语句的花括号配对，确认删除逻辑完完全全写在判断分支的代码块内，没有跑到分支外面
4. 临时在删除逻辑最前面加一句console.log('删除触发，当前判断值：', 你要判断的变量)，点一次按钮如果日志打印了多次，百分百是事件重复绑定导致的问题。

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