Question

我正在查看jQuery平滑滚动教程，并尝试弄清楚它是如何工作的，当我点击这行代码时：

 $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

我无法弄清楚它的作用。看起来这个人正在为一个变量分配一个字符串，但它看起来还有点像是在测试那个变量。我不明白使用＆amp;＆amp;和||这里。有人可以解释一下吗？

谢谢！

编辑：哇！真是个回应！这对我来说有点了解，但是 - 我将不得不打印出来或者其他东西并继续努力。一旦我了解了正在发生的事情，我将能够选择最能帮助我的答案。特别是这一点：

if ($target.length && $target) {
$target = $target;

阻碍了我。程序如何知道将$ target分配给$ target？操作是否将$ target分配给自身的第一个引用（等号的左侧），或第二个引用自身（右侧，＆amp;＆amp;）之后？

Answer 1

它是等效三元运算符的神秘（或优雅？）版本

$target = ($target.length && $target) ? $target : $('[name=' + this.hash.slice(1) +']');

如果$ target的评估不改变$ target的值，则此三元和原始短路表达式将返回完全相同的值。但是如果$ target的评估改变了$ target的值，则SCE和三元返回不同的值，例如

var a = 1; b = 2; c = 3;
a && ++b || c
returns 3;
//resetting b
b = 2
a && ++b ? ++b : c 
returns 4;

如果$ target的评估改变了$ target的值，那么SCE $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');的等效三元运算符将是以下

$target = ($result= ($target.length && $target)) ? $result : $('[name=' + this.hash.slice(1) +']');

Answer 2

它正在测试元素的$target（我假设它是一个jQuery对象），如果为空，则指定一个默认值。

有关详细说明，请参阅Logical Operators。

更新

要解释（如果您不想阅读MDN文档），JavaScript逻辑比较运算符从左到右工作。

expr1 && expr2

如果可以转换为expr1，则会返回false;否则，返回expr2

expr1 || expr2

如果可以转换为expr1，则会返回true;否则，返回expr2

要打破有问题的界限，请按照这种方式考虑

$target = ($target.length && $target) || $('[name=' + this.hash.slice(1) +']');

看第一个操作......

$target.length && $target

如果$target.length可以转换为$target.length（即false），则会返回0，否则会返回$target。

第二个操作看起来像这样......

(operation1) || $('[name=' + this.hash.slice(1) +']')

如果operation1的结果可以转换为true（即$target），则会返回，否则为$('[name=' + this.hash.slice(1) +']')。

Answer 3

这称为Short Circuit evaluation，其不是等同于三元运算符。

和你的代码和平相当于：

if ($target.length && $target) {
    $target = $target;
} 
 else {
    $target = $('[name=' + this.hash.slice(1) +']');
}

在JavaScript和大多数其他松散类型的语言中，有两个以上的真值为True和False，返回的值基于最后一个值。

a && b如果为false则返回a，否则返回b。

a || b将返回if，否则为b。

为了更好地理解上一个值，请看以下示例：

var a = true;
var b = false;
var c = 5;
var d = 0;

return a && b; //returns false
return a && c; //returns 5
return b && c; //returns false
return c && b; //returns false
return c && a; //returns true;
return d && b; //returns 0;
return b && d; //returns false;

return a || b; //returns true
return a || c; //returns true
return b || c; //returns 5
return c || b; //returns 5
return c || a; //returns 5;
return d || b; //returns false;
return b || d; //returns 0;

更新

三元运营商：

(condition)?(evaluate if condition was true):(evaluate if condition was false)

短路评估：

(evaluate this, if true go ahead else return this) && (evaluate this, if true go ahead else return this)

您可以清楚地看到三元运算符有condition，而在SCE中，值本身的评估就是条件。

Answer 4

$ target = $ target.length＆amp;＆amp; $ target || $（'[name ='+ this.hash.slice（1）+']'）;

在javascript中，您可以在分配变量时进行内联比较，因此您的示例等同于

if($target.length && $target)
    $target = $target;
else
    $target = $('[name=' + this.hash.slice(1) +']');

有关更多示例，请参阅http://www.w3schools.com/JS/js_comparisons.asp
例如：

var x= y > 4 ?value1:value2

Witch表示如果条件为真（y大于4），则x将被赋值为value1，否则将赋值为value

谁能解释一下这个Javascript中发生了什么？

4 个答案:

更新

更新