Question

在某人的网站上遇到以下内容，我很想知道这里应用的快捷方式。我为演示目的简化了变量。

 function(){
      _imaboolean || ($element.removeClass("hidden").addClass("visible"), this.imaboolean = !0)
 }

与

相同

this._imaboolean && ($element.removeClass("visible").addClass("hidden"), this._imaboolean = !1)

Answer 1

这是一些糟糕的“聪明”代码，但是，让我们分解它！

_imaboolean || ($element.removeClass("hidden").addClass("visible"), this.imaboolean = !0)

首先，让我们用占位符替换所有表达式（注意这些表达式不纯，并且有副作用）：

a || (b, c)

请注意，||是短路的，只有在(b, c)评估为false-y值时才会评估正确的表达式a - 。

因此，我们假设a求值为false-y值，然后评估(b, c)。在这种情况下，,运算符分隔子表达式;按顺序计算所有子表达式。表达式的结果是最后一个子表达式的结果。

这意味着它大致相当于（虽然没有函数或绑定上下文，但结果却被抛弃了）：

(function () { b; return c })()

这有意义吗？不，当然不是！

写得像你的意思：

if (!_imaboolean) {
  $element.removeClass("hidden").addClass("visible");
  this.imaboolean = true; // get rid of !0 too
}

Answer 2

此代码可以膨胀为：

function() {
    if (!this.imaboolean) {
        $element.removeClass("hidden").addClass("visible");
        this.imaboolean = true;
    }
}

||用作短路，如果imaboolean为true则会突然出现，但如果false它将执行表达式的剩余部分。 !0是一种简化的说法true（因为0在布尔表达式中求值为false）。

Answer 3

我认为这是

的缩写

 function(){
      if( ! _imaboolean){
         $element.removeClass("hidden").addClass("visible");
         this.imaboolean = true; 
     }
 }

在我看来，它的编码通常也很糟糕，不应该复制。

Answer 4

这是一个短路评估，只有在第一部分失败时才会评估第二部分。

Answer 5

function(){
      _imaboolean || ($element.removeClass("hidden").addClass("visible"), this.imaboolean = !0)
 }

让我们打破这个。首先我们看到||运算符，因此我们有(statement) || (anotherStatement)。 ||的工作方式是它评估第一个语句。如果计算结果为true，则它会短路并且不会评估第二个语句。第一个陈述只是_imaboolean。如果这是一个真实的价值（即，不是0或错误或未定义......），那么我们就在那里停下来，不要去第二个声明。

第二个陈述是

($element.removeClass("hidden").addClass("visible"), this.imaboolean = !0)

同样，有两个语句，用逗号分隔。逗号运算符计算BOTH语句，并返回最后一个语句。因此它评估$element.removeClass("hidden").addClass("visible")（在$ element上设置一些类），然后它计算this.imaboolean = !0（将this.imaboolean设置为truthy值）。下次运行此功能时，由于||运算符，它将短路。

这是什么样的Javascript符号/快捷方式？

5 个答案: