JavaScript开发中能否用单个try catch替代多层if做元素存在校验

结论 #

可以这么写，但仅适用于对错误排查要求低、代码执行频率低的场景，更推荐用可选链操作符替代。

两种方案的对比 #

try catch写法的优势 #

• 代码结构扁平，没有多层if嵌套的问题，逻辑链路清晰，符合「任意元素不存在就终止执行」的需求
• 不需要记忆额外的新语法，兼容性比可选链更好，需要兼容ES2020以下的旧浏览器环境时可以使用

try catch写法的明显缺陷 #

• 无差别吞错：catch块会捕获所有类型的错误，不止是元素不存在导致的空指针错误，比如属性名拼写错误、赋值类型错误等逻辑问题也会被直接忽略，会大幅提升调试难度
• 存在性能开销：try catch在JS引擎执行时会有额外的性能损耗，单次执行差异不明显，但如果是滚动监听、循环、高频定时器等场景下使用，累计的性能影响会远高于普通if判断
• 不利于后续扩展：如果后续需要针对「元素不存在」的场景做单独的统计、兜底逻辑，try catch里无法快速区分错误类型，需要额外写错误判断逻辑，反而更麻烦

更推荐的替代方案 #

ES2020标准推出的**可选链操作符（?.）**可以完美平衡简洁性和可靠性，你的示例代码可以直接改写为：

// 链式调用自动判空，任意环节为空就返回undefined，不会抛出错误
const centerElem = document.querySelector(/* 你的选择器 */)
  ?.parentElement
  ?.getElementsByClassName(/* 你的类名 */)[0]

// 存在才执行赋值
if (centerElem) {
  centerElem.style.backgroundColor = "white"
}

可选链只会在碰到null/undefined的时候中断表达式执行，不会吞掉其他类型的错误，比如你拼写错style为styl时，依旧会正常抛出错误提示，方便快速定位问题，性能也和普通if判断几乎没有差异。

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