jQuery中能否使用可选链?.对classList做null空值校验？

只要项目运行环境支持ES2020可选链语法（或通过构建工具做了低版本兼容），jQuery开发中完全可以使用可选链做空值判断，你遇到的报错是写法错误+对jQuery返回逻辑不熟悉导致的，不是可选链本身不能用。

你的代码存在3个核心问题：

• 基础语法错误：jQuery选择器参数必须是字符串类型，你写的$(.class)缺少包裹选择器的引号，同时'hidden缺少闭合单引号，属于基础语法错误。
• 无效的可选链判断：jQuery的工厂函数$()无论是否匹配到DOM元素，永远返回jQuery实例对象（匹配不到元素时返回length为0的空集合对象），永远不会是null/undefined，因此你写在$()后的第一个?.是完全冗余的，不会触发任何空值短路。
• 可选链覆盖范围不全：空jQuery集合调用.get(0)会返回undefined，你在get(0)后加的?.仅能保证当前层级classList的访问不报错，但当get(0)为空时，get(0)?.classList整体会返回undefined，你后续直接调用.add()没有加可选链保护，就会抛出读取空值属性的错误。

可以根据编码习惯选以下任意一种方案：

方案1：修正可选链写法（原生API风格） #

补全所有可能为空层级的可选链标记即可，$()后的可选链属于冗余代码可以直接删除：

$('.class').get(0)?.classList?.add('hidden');

方案2：使用jQuery原生方法（推荐，无需手动防空） #

jQuery本身内置了空集合容错逻辑：所有DOM操作方法在空集合上调用时会静默跳过，不会抛出任何错误，不需要手动判断元素是否存在，写法更简洁：

// 给第一个匹配元素加类，匹配不到元素时什么都不做，不会报错
$('.class').eq(0).addClass('hidden');

注：jQuery的.eq(0)会返回包含第一个匹配元素的jQuery对象，和.get(0)返回原生DOM对象不同，后续直接调用jQuery提供的addClass/removeClass/toggleClass等方法即可。

方案3：手动判断集合长度 #

如果需要在元素不存在时执行其他自定义逻辑，可以先判断jQuery集合的length属性：

const $ele = $('.class');
if ($ele.length) {
  // 确认元素存在后再执行操作
  $ele.get(0).classList.add('hidden');
  // 其他自定义逻辑
}

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