JavaScript 如何解析链式三元表达式？

Posted 2023-02-23

【中文标题】JavaScript 如何解析链式三元表达式？

【英文标题】：How does JavaScript parse chained ternary expressions?

【发布时间】：2014-11-12 03:52:07

【问题描述】：

我正在阅读 jQuery source code for jQuery.filter 并偶然发现了这一堆

jQuery.filter = function( expr, elems, not ) 
    var elem = elems[ 0 ];

    if ( not ) 
        expr = ":not(" + expr + ")";
    

    return elems.length === 1 && elem.nodeType === 1 ?
        jQuery.find.matchesSelector( elem, expr ) ? [ elem ] : [] :
        jQuery.find.matches( expr, jQuery.grep( elems, function( elem ) 
            return elem.nodeType === 1;
        ));
;

总之我们有

return "a" && "b" ? "c" ? "d" : "e" : "f";

每个字符串都可以是不同的值

我的问题不是如何破译这段代码，而是我的大脑正在纠结，试图评估这里使用的逻辑。

谁能帮我理解 javascript 如何评估这个返回表达式？

【问题讨论】：

显然c ? d : e 必须是一个子表达式（没有其他有意义的方式来解释这些标记）。因此，真正归结为a && b ? x : y 是(a && b) ? x : y 还是a && (b ? x : y)。但这肯定可以通过简单的 Google 搜索“javascript 优先级”或类似内容来解决？

jQuery 中的某个人应该学会使用大括号，尽管它在框架大小上花费了 2 位...

另外，代码格式实际上在这种情况下很容易。

【参考方案1】：

条件运算符是右结合的，逻辑运算符具有更高的优先级，所以这样：

return "a" && "b" ? "c" ? "d" : "e" : "f";

相当于这个：

return ( ("a" && "b") ? ("c" ? "d" : "e") : "f" );

或全部：

if ("a" && "b") 
    if ("c") 
        return "d";
     else 
        return "e";
    
 else 
    return "f";

参考

MDN: Operator precedence

【讨论】：

谢谢，小马。你真是一匹漂亮的小马。