如何在querySelector返回null时避免调用目标函数？

针对你提出的「用querySelector定位最多一个元素，找不到时不执行函数，且不声明外部变量」的需求，以下是几种更简洁优雅的实现方案：

核心最优方案（单次DOM查询+极简写法） #

这个方案完美匹配你的要求：只查询一次DOM，无外部变量，元素不存在时业务逻辑完全不执行，写法风格接近querySelectorAll.forEach的简洁性：

((el) => el && (
  // 这里编写你的业务逻辑，示例：
  el.classList.add('active'),
  el.setAttribute('data-loaded', 'true')
))(document.querySelector('[你的CSS选择器]'));

如果需要多行业务逻辑，用大括号包裹即可：

((el) => el && {
  // 多行业务逻辑示例
  el.style.backgroundColor = '#f0f0f0';
  el.addEventListener('click', () => console.log('Element clicked'));
})(document.querySelector('.target-element'));

方案优势 #

• 仅执行一次document.querySelector，避免重复DOM查询的性能损耗
• 利用逻辑与（&&）的短路特性：当el为null（假值）时，后面的业务代码直接跳过，完全不执行
• 无需声明任何外部变量，所有逻辑封装在一个自执行表达式中
• 写法紧凑，和querySelectorAll.forEach的风格一致，保持代码的可读性

其他简化变体（适合极简场景） #

如果你追求极致的简洁，也可以用可选链结合函数调用的方式（需要ES2020+支持）：

document.querySelector('[你的CSS选择器]')?.((el) => {
  // 业务逻辑
})(document.querySelector('[你的CSS选择器]'));

注意：这个变体需要两次DOM查询，性能略逊于核心方案，仅适合对性能要求不高的场景

为什么不推荐querySelectorAll #

正如你所说，querySelectorAll会返回一个NodeList集合，即使只有一个匹配元素也会创建集合对象，属于过度使用——对于明确最多一个元素的场景，querySelector的性能更优，逻辑也更贴合需求。

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