Fatal编程技术网
  • javascript/
  • 如何读取这个复杂的Javascript快捷方式操作符？

如何读取这个复杂的Javascript快捷方式操作符？

javascript

如何读取这个复杂的Javascript快捷方式操作符？,javascript,Javascript,我正潜入另一个开发人员的代码中，遇到了这句疯狂的话。看起来有很多比较，但我还是不明白 num > -1 ? "down" === position && value >= this._offset ? this.hideFunc() : "up" === position && value >= this._offset && this.showFunc() : this.showFunc() 我该如何解读这一点呢？告诉我们，最

我正潜入另一个开发人员的代码中，遇到了这句疯狂的话。看起来有很多比较，但我还是不明白

num > -1 ? "down" === position && value >= this._offset ? this.hideFunc() : "up" === position && value >= this._offset && this.showFunc() : this.showFunc()
我该如何解读这一点呢？

告诉我们，最外层是and，后面是and和比较。写这篇文章的更好（更清晰）的方法是

if (num > -1) {
    if ( "down" === position && value >= this._offset ) {
       return this.hideFunc();
    } else if ("up" === position && value >= this._offset) {
       return this.showFunc();
    } else {
       return; //Doesn't exist in the one liner but the function must return something..
    }
} else {
    return this.showFunc();
}

(num > -1)
  ? ( (("down" === position) && (value >= this._offset))
      ? this.hideFunc()
      : (("up" === position) && (value >= this._offset)) && this.showFunc() )
  : this.showFunc()
（添加括号只是为了明确起见，您不妨省略它们-缩进中有足够的信息）

现在，您“只”需要了解of和运算符，就可以看出这是一种复杂的书写方式

if (num > -1)
    if (value >= this._offset) {
        if ("down" === position)
            this.hideFunc();
        else if ("up" === position)
            this.showFunc();
    }
else
    this.showFunc();
（并从函数调用或
false
返回返回值）
告诉我们最外面的是，后面是and和比较。写这篇文章的更好（更清晰）的方法是


(num > -1)
  ? ( (("down" === position) && (value >= this._offset))
      ? this.hideFunc()
      : (("up" === position) && (value >= this._offset)) && this.showFunc() )
  : this.showFunc()


（添加括号只是为了明确起见，您不妨省略它们-缩进中有足够的信息）

现在，您“只”需要了解of和运算符，就可以看出这是一种复杂的书写方式


if (num > -1)
    if (value >= this._offset) {
        if ("down" === position)
            this.hideFunc();
        else if ("up" === position)
            this.showFunc();
    }
else
    this.showFunc();



（并从函数调用或
false
）返回返回值。
@MajidL向您展示了它是什么，而不是如何破译它

这就是所谓的a，它们可能很难理解

所以，为了阻止它，你有你的第一句话：


num > -1 


这将在任何其他操作之前进行计算，如果它是真的，它将落入第二个三元运算符，该运算符也与
&&
运算符组合：


"down" === position && value >= this._offset


因为这也是一个三元运算符，所以它也有一个
else
，但如果检查：


"up" === position && value >= this._offset


因此，您最终会得到以下结构：


if(num > -1){
    if("down" === position && value >= this._offset){

    }else if("up" === position && value >= this._offset){

    }  
}else{

}


这就让你去弄清楚什么样的返回值和什么样的检查。在我看来，这实际上是棘手的部分

最后一个返回值实际上是最简单的，它将始终属于第一个三元运算符的
else
，因为首先考虑外部运算符。因此：


this.showFunc();


进入我们的结构，如下所示：


if(num > -1){
    if("down" === position && value >= this._offset){

    }else if("up" === position && value >= this._offset){

    }  
}else{
    return this.showFunc();
}


剩下的是中间的支票。在这里，您的另一个开发人员做了一些鬼鬼祟祟且不太可维护的事情，他使用外部值作为两个三元操作的返回值。我不建议这样做

这也意味着内部值
This.hideFunc（）
只能属于内部三元运算符，我们以完成的语句结束


if(num > -1){
    if("down" === position && value >= this._offset){
        return this.hideFunc();
    }else if("up" === position && value >= this._offset){
        return this.showFunc();
    }  
}else{
    return this.showFunc();
} 



@马吉德尔向你展示了它是什么，但没有告诉你如何破译它

这就是所谓的a，它们可能很难理解

所以，为了阻止它，你有你的第一句话：


num > -1 


这将在任何其他操作之前进行计算，如果它是真的，它将落入第二个三元运算符，该运算符也与
&&
运算符组合：


"down" === position && value >= this._offset


因为这也是一个三元运算符，所以它也有一个
else
，但如果检查：


"up" === position && value >= this._offset


因此，您最终会得到以下结构：


if(num > -1){
    if("down" === position && value >= this._offset){

    }else if("up" === position && value >= this._offset){

    }  
}else{

}


这就让你去弄清楚什么样的返回值和什么样的检查。在我看来，这实际上是棘手的部分

最后一个返回值实际上是最简单的，它将始终属于第一个三元运算符的
else
，因为首先考虑外部运算符。因此：


this.showFunc();


进入我们的结构，如下所示：


if(num > -1){
    if("down" === position && value >= this._offset){

    }else if("up" === position && value >= this._offset){

    }  
}else{
    return this.showFunc();
}


剩下的是中间的支票。在这里，您的另一个开发人员做了一些鬼鬼祟祟且不太可维护的事情，他使用外部值作为两个三元操作的返回值。我不建议这样做

这也意味着内部值
This.hideFunc（）
只能属于内部三元运算符，我们以完成的语句结束


if(num > -1){
    if("down" === position && value >= this._offset){
        return this.hideFunc();
    }else if("up" === position && value >= this._offset){
        return this.showFunc();
    }  
}else{
    return this.showFunc();
} 



有趣的是，在解构三元算符时，这里的其他答案似乎都忽略了一个潜在的分支


if (num > -1) {
    if ( "down" === position && value >= this._offset ) {
       return this.hideFunc();
    } else if ("up" === position && value >= this._offset) {
       return this.showFunc();

    /*** HERE'S THE BRANCH OTHER ANSWERS MISS ***/
    } else {
       return false;
    }

} else {
    return this.showFunc();
}


这来自你问题中可怕的三元表达的这一特殊部分：


"up" === position && value >= this._offset && this.showFunc()


我们可以将其分为两个分支：


"up" === position && value >= this._offset


显然，这个表达式实际上也是两个分支；但我们可以确定，在任何一种情况下，结果都将是
true
或
false
如果结果为
真
，则我们将进入此：


this.showFunc()


否则，短路逻辑将已经导致
错误
。因此，缺少的分支

具体而言：如果出现以下情况，则会出现这种情况：


    

  • num
    大于-1，并且：
    • 

  • 位置既不是
    “向下”
    也不是
    “向上”
    ，或者：
    • 

  • 位置
    为
    “向上
    ”，但
    值
    小于
    。\u偏移量
    • 


三元表达式涵盖了这种情况，答案也是如此。其他答案没有（代码会一直通过并导致
未定义
）


不过，公平地说：无论如何都不会使用结果（如果原始代码确实是您包含的一行代码），在这种情况下，没有功能上的差异。然而，我觉得写这个答案主要是为了强调测试现有功能重构的重要性，即使之前的代码很糟糕，即使您在分析时很小心。
有趣的是，在解构三元算符时，这里的其他答案似乎都忽略了一个潜在分支


if (num > -1) {
    if ( "down" === position && value >= this._offset ) {
       return this.hideFunc();
    } else if ("up" === position && value >= this._offset) {
       return this.showFunc();

    /*** HERE'S THE BRANCH OTHER ANSWERS MISS ***/
    } else {
       return false;
    }

} else {
    return this.showFunc();
}


这来自你问题中可怕的三元表达的这一特殊部分：


"up" === position && value >= this._offset && this.showFunc()


我们可以将其分为两个分支：


"up" === position && value >= this._offset


显然，这个表达式实际上也是两个分支；但我们可以确定，在任何一种情况下，结果都将是
true
或
false
如果结果为
真
，则我们将进入此：


this.showFunc()


否则，短路逻辑将已经导致
错误
。因此，缺少的分支

到