JavaScript中如何简洁安全调用可能为undefined对象的方法？

这确实是日常开发中很容易遇到的重复逻辑问题，每次都手动判断undefined太繁琐了，给你分享几个更优雅的解决方案：

1. 利用ES2020可选链操作符（最简洁） #

ES6之后的可选链操作符?.可以完美解决这个“空值调用”的问题，它会在左侧值为null或undefined时直接返回undefined，不会继续执行后面的方法调用：

if ($("#locations > tr > th").attr("id")?.endsWith("_5")) {
  // 你的逻辑代码
}

当目标元素不存在时，attr("id")返回undefined，?.会终止后续调用，整个表达式结果为undefined，在if判断中会被视为false，完全符合你的需求。

2. 使用jQuery的filter方法（兼容性更好） #

如果你需要兼容不支持可选链的旧环境，可以用jQuery的filter方法直接筛选符合条件的元素，再判断结果长度：

if ($("#locations > tr > th").filter((index, element) => element.id.endsWith("_5")).length > 0) {
  // 你的逻辑代码
}

这里直接用原生DOM的element.id比attr("id")更高效，而且filter会自动忽略不存在的元素，最后通过length判断是否有匹配结果，逻辑清晰且兼容性拉满。

3. 封装工具函数（适合频繁调用场景） #

既然你需要频繁编写这类逻辑，不如把判断逻辑封装成一个可复用的小函数：

function elementIdEndsWith(selector, suffix) {
  const targetElement = $(selector)[0];
  return targetElement?.id.endsWith(suffix) ?? false;
}

// 调用示例
if (elementIdEndsWith("#locations > tr > th", "_5")) {
  // 你的逻辑代码
}

这个函数把判断逻辑抽离出来，每次调用只需要传入选择器和后缀即可，代码复用性更强，而且用?? false确保即使可选链返回undefined，最终也会返回布尔值false，逻辑更严谨。

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