javascript - 如何根据 JavaScript 中哪个 nodeList 不为空来设置变量？

Question

我想知道是否有更好的方法来做到这一点:

我正在尝试将 target 设置为 [data-update]" 或 div.ui-content 以在其中找到一个元素。

本来我想做这样的事情:

target = el.querySelectorAll("[data-update]") || el.querySelectorAll("div.ui-content");

但这行不通，因为第一个表达式总是会被定义，即使它是一个空的 nodeList []。

所以现在我有了这个，它可以工作，但我对它不满意:

target = container.querySelectorAll("[data-update]")

if (target.length === 0) {
  target = container.querySelectorAll("div.ui-content");
}

if (target.length === 0) {
  util.errorHandler({"error": "updatePageSection: No target found"});
} else {
  // do stuff
}

问题:
有没有更简单的方法来做到这一点？仅限纯 JavaScript。

谢谢!

Answer 1

使用条件运算符，并检查选择的长度:

target = el.querySelectorAll("[data-update]").length
     ? el.querySelectorAll("[data-update]")
     : el.querySelectorAll("div.ui-content");

基本上 a ? b : c 表示如果a为真，取b，否则取c。更多信息:Contional operator .

此外，如果你不想重复第一次选择，你可以添加一个额外的步骤:

target = el.querySelectorAll("[data-update]");
target = target.length ? target : el.querySelectorAll("div.ui-content");

你第一次看到这个语法真的很奇怪。但您很快就会习惯的。

注意:在 JavaScript 中，零被视为假。并且非零数字被视为 true。