javascript - 检查是否有办法在 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")); 
 }

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

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

Answer 1

一次optional chaining已实现(或者您使用 Babel 通过 this plugin 转译您的代码)，您可以使用 ?.:

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

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

除此之外，没有办法避免普通 Javascript 中的 if 检查。

(但是不要害怕使用显式的 if - 在其他条件相同的情况下，较长、可读的代码可以说比较短、有缺陷的代码更好)