JS使用try/catch时如何在单条语句失败时仍执行其余全部语句

你当前使用的块级try/catch机制，只要块内任意一条语句抛出未被捕获的异常，就会直接中断块内所有后续代码的执行，跳转到catch逻辑。你不需要给每条语句手动重复写try/catch块，有更简洁的实现方案。

方案1：封装通用安全执行函数（通用性最强） #

把错误捕获逻辑抽成可复用的公共函数，所有需要独立容错的操作把逻辑作为回调传入即可，单个操作的异常只会被当前执行上下文捕获，不会影响其他操作：

// 统一错误处理的包装函数
const safeExec = (action, errTip = '操作执行失败') => {
  try {
    return action()
  } catch (err) {
    console.warn(errTip, err)
    // 可按需扩展错误上报、兜底返回等逻辑
    return undefined
  }
}

// 业务代码调用，单条失败不影响后续
safeExec(() => document.querySelector("div[role='banner']").remove(), '移除banner节点失败')
safeExec(() => document.querySelector("div[aria-label='start']").remove(), '移除start节点失败')

// 提前获取复用DOM，减少重复查询
const targetEl = safeExec(() => document.getElementById("container").children[0], '获取目标容器子元素失败')
if (targetEl) {
  safeExec(() => targetEl.style.left = '0px', '设置left样式失败')
  safeExec(() => targetEl.style.top = '300px', '设置top样式失败')
  safeExec(() => targetEl.style.width = '828px', '设置width样式失败')
  safeExec(() => targetEl.style.height = '466px', '设置height样式失败')
}

这个方案的优势：

• 没有重复的try/catch样板代码，错误处理逻辑统一维护，后续调整规则只需要修改safeExec一处
• 支持捕获所有类型的异常，包括DOM方法执行内部抛出的错误，不只是空值访问错误
• 可以灵活给不同操作加自定义错误提示、兜底逻辑

方案2：可选链前置防御（适合简单场景） #

如果你的报错大多是因为DOM查询返回null导致的空值访问错误，可以用可选链操作符?.做短路防御，写法更简洁：

// 查询不到DOM时会直接短路，不会执行remove()抛出错误
document.querySelector("div[role='banner']")?.remove()
document.querySelector("div[aria-label='start']")?.remove()

const targetEl = document.getElementById('container')?.children?.[0]
if (targetEl?.style) {
  targetEl.style.left = '0px'
  targetEl.style.top = '300px'
  targetEl.style.width = '828px'
  targetEl.style.height = '466px'
}

注意：可选链只能防御访问null/undefined属性的错误，如果DOM方法本身执行抛出异常（比如remove()调用时节点已被移除触发的DOM异常），可选链无法捕获，还是会中断后续代码，复杂场景优先选方案1。

这种写法会产生大量重复的冗余代码，后续如果要调整错误处理逻辑（比如加错误上报、修改日志格式），需要修改每一处catch块，维护成本极高，不符合代码复用的原则。

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