!myVar与myVar === undefined的细微差异及if语句最佳实践探讨

嘿，这个问题问到点子上了，JS里这些判断逻辑的差异确实容易踩坑，我给你拆解清楚～

这俩的核心差异主要体现在两个场景：

• 变量压根没被声明的时候：如果myVar从来没被var/let/const声明过，不管你用myVar === undefined还是!myVar，都会直接抛出ReferenceError错误。这时候要安全检查的话，得用typeof myVar === 'undefined'——typeof对未声明的变量不会报错，只会返回'undefined'。
• 变量已声明但值是假值的时候：JS里的假值包括undefined、null、0、''（空字符串）、false、NaN。当myVar是这些值里除了undefined的其他假值时，!myVar会返回true，但myVar === undefined会返回false。举个实际例子：

  let userAge = 0; // 0是合法的年龄值
  console.log(!userAge); // 输出true，会被当成“无效值”
  console.log(userAge === undefined); // 输出false，正确识别为已定义的有效值
  

• 只有当变量已声明且值就是undefined时：这俩的结果才完全一致，都会返回true。

先讲差异，再聊怎么选：

差异点 #

• 判断范围不一样：if(myVar === undefined)是“精准打击”——只有当变量的值严格等于undefined时才会进入分支；而if(!myVar)是“大范围覆盖”——只要变量是任何假值，都会进入分支。
• 未声明变量的处理：和上面一样，要是myVar没被声明，俩写法都会报错，得用typeof的写法兜底。

最佳实践 #

得看你的业务场景来选：

• 当你需要精准判断变量是否为undefined时：优先用myVar === undefined（前提是确定变量已经被声明），或者typeof myVar === 'undefined'（不确定变量是否声明时，更安全）。比如判断函数参数是否被传入，或者某个配置项是否未被设置，用精准判断能避免把0、空字符串这些合法值误判成“未定义”。
• 当你需要判断变量是否为“无效/空值”时：用!myVar完全没问题，但要确保你的业务逻辑里，所有假值都属于“需要处理的情况”。比如判断用户是否输入了内容（空字符串算未输入），或者判断某个对象是否存在（null和undefined都算不存在）。
• 避坑提醒：如果你的业务里0、''、false这些是合法的有效值，绝对不能用!myVar！比如统计商品数量时，0是合法的库存数，这时候用if(!stockCount)会错误地把0当成“无库存”来处理，直接出bug。

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