JavaScript 中三元条件运算符和逻辑与运算符的运算符优先级

Question

大家好，我刚刚浏览了一个 JS 插件的源代码 (dropdown.js)，发现了以下代码行：

return $parent && $parent.length ? $parent : $this.parent()

我无法完全理解上面这行，我理解逻辑与（&&）和三元条件运算符（... ? ... : ...），但我似乎不理解它们在上面是如何相互作用的例如。

现在，如果我在 return 语句之前添加一个 console.log：

console.log($parent && $parent.length ? $parent : $this.parent());

我得到：

Object { 0: <li.dropdown.open>, length: 1, prevObject: Object, context: <a.dropdown-toggle>, selector: ".parent()" }

确实是 $this.parent()

此外，在我的例子中，$parent 的计算结果为 false。

这些是我的乐高积木，有人可以帮我把它放好并给我一个清晰的图片来说明它是如何工作的吗：

return $parent && $parent.length ? $parent : $this.parent()

谢谢。

*请注意，此问题的 pre-edit 版本标题不正确，并且在仔细阅读之前没有解释问题的真正含义，因此请不要对任何答案投反对票下面似乎只是为了寻找 out-of-topic 和粗心

而谈论 "Short-circuiting" 来代替这个问题的实际主题（运算符优先级）

Answer 1

return ($parent && $parent.length) ? $parent : $this.parent()

这样读。两个条件都必须为真。在 JS 中，一旦条件为 false

，&& 操作数就会 return false

Answer 2

如果 $parent 解析为 "truthy" 值，$parent.length 也是如此（这意味着在这种情况下它不是 0），那么它将 return $parent.

的值

如果 $parent 为 false（很可能为 null 或未定义），或者父项的长度为 0，则 returns $this.parent().

Answer 3

由于 JavaScript 的 operator precedence，您发布的表达式等同于：

return ($parent && $parent.length) ? $parent : $this.parent();

这是因为 && 运算符在 ?: 之前被求值。或者，您可以使用 if else:

重写表达式

if ($parent && $parent.length)
    return $parent;
else
    return $this.parent();

Answer 4

在javascript中，尤其是在条件语句中，以下是正确的

if($parent) //checking whether the $parent variable has a value

您发布的条件语句是以下类型的文字

如果 $parent 不是 null/undefined 且 $parent.length 不是 null/undefined，则 return $parent，否则 return $this.parent();

让我们再看看那句话

return $parent && $parent.length ? $parent : $this.parent();

首先是三元运算符的条件

$parent && $parent.length

短路运算符在这里起作用，因为如果 $parent 是 null/undefined，它不会计算 $parent.length（这将抛出 javascript 异常）。如果它不为空，则计算 $parent.length 是否不为 null/undefined.

相同的代码可以写成（使用 'null' 只是为了简洁）

if($parent != null && $parent.length !=null) {
    return $parent;
} else {
    return $this.parent();
}

Answer 5

这里，$parent和$this都是JQuery对象。 $parent && $parent.length ? $parent : $this.parent() 行等同于：

if($parent && $parent.length) {
  return $parent;
}
return $this.parent();

所以$parent && $parent.length实际上被计算为：if $parent and $parent.length are not null, undefined, 0 或 false（虚假值），然后 return $parent，否则 return $this.parent().

JavaScript 中三元条件运算符和逻辑与运算符的运算符优先级

Operator Precedence with Ternary Conditional and Logical And operators in JavaScript

javascript

operator-precedence