Javascript逗号分隔函数是啥意思

Posted 2023-02-16

【中文标题】Javascript逗号分隔函数是啥意思

【英文标题】：What means Javascript comma separated functionsJavascript逗号分隔函数是什么意思

【发布时间】：2014-02-04 08:08:57

【问题描述】：

我正在阅读一个 javscript dojo 库，我看到许多我无法理解的复杂函数。例如：

_refreshUI: function () 
    this._hasUI && (g.empty(this.flowContainer), f.forEach(this.basemaps, function (a, b)  a.id || (a.id = "basemap_" + b); this.flowContainer.appendChild(this._buildNodeLayout(a))
, this), g.create("br",  style:  clear: "both"  , this.flowContainer), this._markSelected(this._selectedBasemap))

这个函数写在一行上。它包含用逗号分隔的函数。所以我看不懂。

我不问上面的函数是做什么的。

这是什么意思？：

this._hasUI && (firstFunction, secondFunction, ...)

它有什么作用？或者怎么写清楚？

【问题讨论】：

if this._hasUI true 比调用函数。看Logical Operators和Comma Operator

同jsFiddle

【参考方案1】：

这是一种仅在 this._hasUI 解析为 true 时才执行函数的方法。

试试这个：

true && (console.log(1), console.log(2));

还有这个：

false && (console.log(1), console.log(2));

您会看到只有第一行会运行 console.log() 函数。

这是因为布尔 AND 运算符 (&&) 被延迟评估。如果运算符的左侧解析为false，解释器将不会费心评估右侧，因为该操作永远不会导致true。这意味着右边的函数只有在左边是truthy value时才会执行。

【讨论】：

为了使答案更完整，语法(function1, function2) 将执行这两个函数（从左到右），并且无论function1 返回什么，都将返回function2 返回的任何内容。

@user2070775 我认为你的评论更符合我想象的 OP 的要求

【参考方案2】：

让我们把它放在一个对象中，为了便于阅读，我用括号括住了函数：

var myObj = 
    _hasUI : true,
    _markSelected : function(arg)some logic
    _refreshUI: function() 
                 this._hasUI &&  
                 (
                      // Strat evaluation from the left to right
                                 (g.empty(this.flowContainer), 
                                 (f.forEach(...)                ), 
                                 (g.create(args)                ), 
                                 (this._markSelected(arg)   )
                     // End evaluation and return
                     // the result of this._markSelected(arg)
                 )

基本上，这意味着如果 this._hasUI 为真继续执行您找到的内容。在这种情况下，执行/评估第一个函数然后是第二个函数.. 直到最后一个函数，它将 仅返回最后一个函数的结果。 您可以找到其他东西，而不仅仅是一个函数，您可以在任何表达式中找到比较变量...

用整数查看相同的代码：

var secondExempleObj = 
    _hasUI : true, // change it to false and see the difference
    _refreshUI: function () 
        return ( this._hasUI && (1,false,3,4) )
    

console.log('result : ' + secongExempleObj ._refreshUI());
// if _hasUI == true then the resutl will be 4
// if _hasUI  == false you will get false
// _hasUI  will work just like light switch if true -> continue to evaluate the rest of expressions else get out of there so we can replace it like so

var thirdObj  = 
    numbers : [1,87,30],
    sumFunction : function(n1,n2,n3) console.log(n1+n2+n3) ,
    _hasUI : true,
    _refreshUI: function () 
        if(this._hasUI == true)          
            return (1,false,this.sumFunction(...this.numbers),4)
       else
           return false;
       
   

console.log('result  : ' + thirdObj._refreshUI());
// it will console log 118 then 4 
// if you switch _hasUI to false it will logout false

希望对你有意义