检查元素的存在，并在一行中分配给变量。

Question

下面的检查和任务能不能用一行字来写？

const panel = this.element.querySelector(".c-global-search__panel");
this.panel = (panel instanceof HTMLElement) ? panel : null;

类似这样。

this.panel = (variable = querySelection and condition) ? assignment : fallback;

Answer 1

你可以使用简单的 || (或)，作为返回值的 querySelector 是 HTMLElement | null. HTMLElement 是真值，因此会被返回，如果是空值，则使用回退。

this.panel = this.element.querySelector(".c-global-search__panel") || fallback;

---

还有一个null coalescing操作符。这是新的，还没有被浏览器支持(仅TS和Babel)，但它更好，因为它也将false和0作为有效值。但在这种情况下，它是不需要的。

this.panel = this.element.querySelector(".c-global-search__panel") ?? fallback;

但有一点需要注意的是... 反正引擎会做这个优化，没有真正的必要。与其说是单行本，不如说是注重可读性。

Answer 2

你不需要第二行。querySelector() 已经返回 null 如果没有找到元素。

this.panel = this.element.querySelector(".c-global-search__panel");

你的第二行将值设置为 null 是多余的。