检查是否有办法在 querySelector 之后链接函数，即使它可能为空?

Question

只是想看看是否有一种更简洁的方法可以使用querySelector而不是使用jQuery来执行以下操作。

document.querySelector('#cancel-message').addEventListener('click', () => $("#accession_message").modal("hide")); 

以上将在不存在该元素的页面上引发"未定义"错误，我知道可以使用jQuery或仅执行以下操作来避免该问题：

x = document.querySelector('#cancel-message');
if(x) {
x.addEventListener('click', () => $("#accession_message").modal("hide")); 
}

我想看看它是否可以使用vanilla JavaScript来完成，我想知道是否有一个JavaScript方法/函数可以在querySelector之后和"addEventListener"之前链接到它，以便它只会在元素存在时执行下一个链接函数并防止触发"未定义"错误。 有这样的事情吗？？ 例如

document.querySelector('#cancel-message'). javacriptFunction() .addEventListener('click', () => $("#accession_message").modal("hide")); 

Answer 1

一旦实现了可选的链接(或者你使用 Babel 通过这个插件转译你的代码(，你可以使用?.：

document.querySelector('#cancel-message')?.addEventListener('click', () => $("#accession_message").modal("hide")); 
//                                       ^^

这样，如果querySelector的计算结果为null，则整个表达式的计算结果将undefined，并且不会调用addEventListener。

除此之外，没有办法避免在vanilla Javascript中进行if检查。

(但不要害怕使用显式if- 更长、可读的代码可以说比更短、更糟糕的代码更好，其他条件相同(