JS中undefined与NULL检查失效问题求助

原始代码片段 #

for(const id of this.extraRooms)
{
  let doesRoomExist = document.getElementById('newRoomAddress' + newRoomId);
  //if(typeof(doesRoomExist) !== "null")              
   if(typeof(doesRoomExist) !== "undefined")
  {
      const newRoomLabel = document.getElementById('newRoomAddress' + newRoomId).value        
  }
}

（注：原代码存在语法错误，已补全闭合大括号）

问题现象 #

当doesRoomExist为null时，代码仍会进入if语句；VS Code调试显示该变量为null，但浏览器开发者工具中显示为undefined。

原因分析 #

1. 判断逻辑错误：document.getElementById()找不到目标元素时，标准返回值是null，而非undefined。而typeof null的结果是"object"，所以typeof(doesRoomExist) !== "undefined"这个条件永远为真（无论变量是null还是有效元素），导致代码必然进入if块。
2. 调试显示差异：大概率是VS Code调试器与浏览器环境的执行时序差异，或调试过程中变量被其他代码意外修改，但核心问题在于判断逻辑的错误。

解决办法 #

修正判断逻辑 #

直接针对null或元素的真值特性做判断，推荐以下几种写法：

• 写法1（精准判断）：

  if (doesRoomExist !== null)
  

• 写法2（简洁高效，利用假值特性）：

  if (doesRoomExist) // null、undefined、空字符串等假值都会被排除
  

• 写法3（严格类型判断，适合特殊场景）：

  if (typeof doesRoomExist === "object" && doesRoomExist !== null)
  

优化后的完整代码 #

for(const id of this.extraRooms) {
  const doesRoomExist = document.getElementById('newRoomAddress' + newRoomId);
  if (doesRoomExist) {
    // 复用已获取的元素，避免重复查询DOM，提升性能
    const newRoomLabel = doesRoomExist.value;
    // 后续逻辑
  }
}

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