JavaScript 短路逻辑

Question

在网上看了一些例子后，我收集了两种不同的解释：

例如：var x = A ||乙;

1. 如果 A 存在而 B 不存在，则返回左侧。
2. 如果 A 存在且 B 存在，则返回右侧（最后评估的值）。

基于该逻辑，我假设 x 将返回：v.item(0).click()。但是在测试它时，x 先返回 B，然后是 A，也就是解雇 B，然后也解雇 A。为什么？ (http://jsfiddle.net/nysteve/QHumL/59/)

HTML：

<div class="indeed-apply-button" onclick="alert('BOOM BUTTON');">boo</div>
<div class='view_job_link' onclick="alert('BOOM LINK');">boo</div>

JavaScript

var v = document.getElementsByClassName('view_job_link');
var i = document.getElementsByClassName('indeed-apply-button');
var x = v.item(0).click() || i.item(0).click();

编辑 2013 年 10 月 10 日下午 1:02

没有提及我的真实意图，但根据回答和讨论，我的目标本质上是将下面这段代码转换为我最初提到的JavaScript代码。

var v = document.getElementsByClassName('view_job_link');
var i = document.getElementsByClassName('indeed-apply-button');
if(v){v.item(0).click();}
else if(i){i.item(0).click();}
else{}

在上面的代码中，您如何阅读 if(v){v.item(0).click();} 与短路？

Answer 1

你的两个描述都不准确。

var x = A || B;

它的作用是：

1. 评估“A”。 调用结果V_A。
2. 如果 V_A 不是 null、undefined、0、NaN、false 或空字符串，则值为整个表达式的值是 V_A 并且评估停止。
3. 评估“B”。 调用结果V_B。那个值，V_B，就是表达式的值。

您的测试代码首先测试在第一个元素上调用“click”函数的返回值，然后是第二个元素。这些函数都返回undefined，因此|| 两侧的子表达式都会被计算。也就是说，第一个调用得到 V_A 并且它是undefined，这意味着另一方也将被评估，这将是表达。 （它会出来undefined。）

edit — 好的，既然你已经在答案中添加了更多内容，我想我明白你在做什么了。

在您的实际代码中（或者，我猜是更接近现实的示例代码），您有：

if(v){v.item(0).click();}
else if(i){i.item(0).click();}
else{}

这意味着与以下完全不同的东西：

var x = v.item(0).click() || i.item(0).click();

请注意，在if 语句版本中，它明确检查“v”。像这样的测试将对“v”的值执行“真/假”测试。在这种情况下，确实需要检查以确保“v”不是null 或undefined。然而，在|| 版本中，没有明确测试变量“v”的“好坏”；它只是直接使用。 （如果它恰好是null，那会导致运行时错误。）

使用|| 和&& 的实际代码版本是可能的，但我认为现有代码更清晰。但是，出于讨论目的，您可以将 if 版本替换为：

v && (v.item(0).click(), true) || i && i.item(0).click();

我个人认为这看起来有点丑。