JavaScript短路逻辑

bro*_*web 3 javascript short-circuiting

在网上看到一些例子后,我收集了两个不同的解释:

例如:var x = A || B;

  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>
Run Code Online (Sandbox Code Playgroud)

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();
Run Code Online (Sandbox Code Playgroud)

编辑1:02 PM 10/10/2013

没有提到我的真实意图,但基于答案和讨论,我的目标主要是将以下代码转换为我最初提到的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{}
Run Code Online (Sandbox Code Playgroud)

在上面的代码中,您将如何读取if(v){v.item(0).click();}短路?

Poi*_*nty 6

你的两个描述都不准确.

var x = A || B;
Run Code Online (Sandbox Code Playgroud)

这样做是:

  1. 评估"A".调用化结果V .
  2. 如果V 不是null,undefined,0,NaN,false,或空字符串,则整体表达式的值是V 和评价停止.
  3. 评估"B".调用化结果V .该值V B是表达式的值.

您的测试代码首先测试在第一个元素上调用"click"函数然后在第二个元素上调用返回值.这些函数都返回undefined,因此||评估两侧的子表达式.也就是说,第一个调用获得V A而它是undefined,这意味着另一方也将被评估,并且这将是表达式的值.(它会出来的undefined.)

编辑 - 现在好了你已经添加了更多的答案,我想我知道你在做什么.

在您的实际代码中(或者,我猜,更接近现实的示例代码),您已经:

if(v){v.item(0).click();}
else if(i){i.item(0).click();}
else{}
Run Code Online (Sandbox Code Playgroud)

这意味着完全不同于:

var x = v.item(0).click() || i.item(0).click();
Run Code Online (Sandbox Code Playgroud)

请注意,在if语句版本中,它显式检查"v".像这样的测试将对"v"的值执行"truthy/falsy"测试.在这种情况下,它确实检查以确保"v"不是null或者undefined.||然而,在版本中,对变量"v"的"良好性"没有这样的明确测试; 它只是直接使用.(如果恰好null存在,则会导致运行时错误.)

使用||&&可能的实际代码版本,但在我看来,现有代码更清晰.但是,仅出于讨论目的,您可以将if版本替换为:

v && (v.item(0).click(), true) || i && i.item(0).click();
Run Code Online (Sandbox Code Playgroud)

我个人认为这看起来很丑陋.