JavaScript短路逻辑

Question

JavaScript短路逻辑

3

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

例如：var x = A || B;

如果A存在而B不存在，则返回左边。

如果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();}和短路的区别？

- brooklynsweb

我不确定你所说的“存在”和“不存在”的含义，但使用||进行短路求值检查值的真实性。因此，它正在检查调用.click()的结果的真实性。 - Ian

如果A是某个东西，那么B是或不是都无所谓... - dandavis

请明确陈述您的问题，发布相关的HTML和JavaScript代码，并包含一个可演示的工作fiddle。 - Reinstate Monica -- notmaynard

1个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Pointy · Accepted Answer

你的两个描述都不准确。

var x = A || B;

这段代码的作用是：

评估“A”。将结果称为 V_A。
如果 V_A 不是 null、undefined、0、NaN、false 或空字符串，则整个表达式的值为 V_A，并停止评估。
评估“B”。将结果称为 V_B。该值 V_B 是表达式的值。

你的测试代码首先测试调用第一个元素的“click”函数的返回值，然后测试第二个元素。这两个函数都返回undefined，因此在||两侧的子表达式都会被评估。也就是说，第一次调用得到了V_A，它是undefined，因此另一侧也会被评估，并且那将是表达式的值。（它将变成undefined。）编辑 - 现在您已经添加了更多答案，我想我知道您的意图了。在您的实际代码中（或者我猜更接近现实的示例代码），您有：

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();

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