JavaScript检测undefined变量最优方式及AJAX场景判断优化

嘿，我来帮你把这个问题理清楚，顺便优化你的AJAX代码逻辑～

首先得区分两种场景：变量是否已经被声明，以及变量是否为null/undefined：

• 如果变量可能根本没被声明（比如来自外部的不确定参数），最安全的方式是用typeof检测：

  if (typeof someVariable === 'undefined') {
    // 变量未声明，或者已声明但值为undefined
  }
  

  直接写someVariable === undefined会抛出ReferenceError，但typeof即使面对未声明的变量也不会报错，这是它的核心优势。

• 如果变量已经明确被声明，只是想排除null和undefined，可以用更简洁的!= null：

  if (myVariable != null) {
    // myVariable既不是null也不是undefined
  }
  

  这是JS里的实用小技巧——因为null == undefined，所以!= null就等价于myVariable !== null && myVariable !== undefined，代码更紧凑易读。

• 如果是检测对象的属性是否存在/未定义，推荐用obj.hasOwnProperty('prop')或者'prop' in obj，避免属性值本身就是undefined的误判。

先指出你原来代码里的逻辑问题：if (form != null || form != undefined)这个条件永远为true！因为：

• 如果form是null，form != undefined为true；
• 如果form是undefined，form != null为true；
• 如果form是其他值，两个表达式都为true。

这意味着不管form是什么，你都会执行data = $(form).serialize()，这显然不是你想要的效果。

结合你的需求（只有当form有效存在时，才用表单序列化结果覆盖data），这里有几种优雅的优化方式：

方式1：简洁的基础判断（适合form是DOM元素或已确认存在的选择器） #

$.ajax({
  type: method,
  url: url,
  success: function (data) {
    // 只有当form既不是null也不是undefined时，才执行序列化
    if (form != null) {
      data = $(form).serialize();
    }
    const json = JSON.parse(data);
    const list = $(table).html();
    const compileTemplate = Handlebars.compile(list);
    const result = compileTemplate(json);
    const content = document.getElementById(element);
    content.innerHTML = result;
  },
  dataType: "text"
});

方式2：更严谨的表单存在性检测（适合form是选择器字符串，可能找不到元素的情况） #

如果form是类似#myForm的选择器，即使选择器找不到元素，$(form)也会返回空的jQuery对象，serialize()会返回空字符串，这会导致后续JSON.parse报错。所以可以加上jQuery对象的长度检测：

$.ajax({
  type: method,
  url: url,
  success: function (data) {
    // 确保form存在，且对应的jQuery对象有有效元素
    if (form && $(form).length > 0) {
      data = $(form).serialize();
    }
    // 后续逻辑不变...
  },
  dataType: "text"
});

方式3：用短路求值简化代码（可选） #

如果喜欢更简洁的写法，可以用逻辑与的短路特性：

form != null && (data = $(form).serialize());

这种写法和方式1的逻辑完全一致，只是更紧凑。

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