Javascript，IF 语句中的逗号 - 试图理解这段代码

Posted 2023-05-08

【中文标题】Javascript，IF 语句中的逗号 - 试图理解这段代码

【英文标题】：Javascript, commas in IF statements - trying to understand this code

【发布时间】：2020-04-11 00:27:22

【问题描述】：

我正在使用一个名为 DIVI 的 WP 主题，在试图弄清楚他们的 Slider 是如何工作的时，我遇到了我想要理解的这段代码：

    window.et_pb_slider_init=function($this_slider)
            var et_slider_settings=fade_speed:700,
                                    slide:$this_slider.hasClass("et_pb_gallery")?".et_pb_gallery_item":".et_pb_slide";

            if($this_slider.hasClass("et_pb_slider_no_arrows")&&(et_slider_settings.use_arrows=!1),
            $this_slider.hasClass("et_pb_slider_no_pagination")&&(et_slider_settings.use_controls=!1),
            $this_slider.hasClass("et_slider_auto"))
                    et_slider_settings.slideshow=!0;
                    var et_slider_autospeed=/et_slider_speed_(\d+)/g.exec($this_slider.attr("class"));
                    et_slider_settings.slideshow_speed=null===et_slider_autospeed?10:et_slider_autospeed[1]
                    

            $this_slider.parent().hasClass("et_pb_video_slider")&&(et_slider_settings.controls_below=!0,
                    et_slider_settings.append_controls_to=$this_slider.parent(),
                    setTimeout(function()
                            $(".et_pb_preload").removeClass("et_pb_preload")
                    ,500)),
            $this_slider.hasClass("et_pb_slider_carousel")&&(et_slider_settings.use_carousel=!0),
            $this_slider.et_pb_simple_slider(et_slider_settings)
            

真正让我困惑的是第 5 行的 IF 语句和第 13 行的代码。

我在这里的另一篇文章中看到，当 IF 语句用逗号分隔时，每行都会被评估，但只返回最后一个操作数 - 但如果只返回最后一个操作数，我没有得到那个 cos，什么接地点其他操作数有？！ 除非它们实际上是在改变变量 - 但我以前从未在 IF 语句中看到过这种情况，尽管 IF 只是用于比较值。

所以我想知道，这个代码可以吗：

            if($this_slider.hasClass("et_pb_slider_no_arrows")&&(et_slider_settings.use_arrows=!1),
            $this_slider.hasClass("et_pb_slider_no_pagination")&&(et_slider_settings.use_controls=!1),
            $this_slider.hasClass("et_slider_auto"))
                    et_slider_settings.slideshow=!0;
                    var et_slider_autospeed=/et_slider_speed_(\d+)/g.exec($this_slider.attr("class"));
                    et_slider_settings.slideshow_speed=null===et_slider_autospeed?10:et_slider_autospeed[1]
                    

也写成这样？ ：

    if($this_slider.hasClass("et_pb_slider_no_arrows"))
            et_slider_settings.use_arrows=!1
            

    if($this_slider.hasClass("et_pb_slider_no_pagination"))
            et_slider_settings.use_controls=!1
            

    if($this_slider.hasClass("et_slider_auto"))
            et_slider_settings.slideshow=!0;
            var et_slider_autospeed=/et_slider_speed_(\d+)/g.exec($this_slider.attr("class"));
            et_slider_settings.slideshow_speed=null===et_slider_autospeed?10:et_slider_autospeed[1]
            

之后代码中发生了什么，它是否也像 IF 语句一样工作？

            $this_slider.parent().hasClass("et_pb_video_slider")&&(
                    et_slider_settings.controls_below=!0,
                    et_slider_settings.append_controls_to=$this_slider.parent(),
                    setTimeout(function()
                            $(".et_pb_preload").removeClass("et_pb_preload")
                    ,500)
                    ),$this_slider.hasClass("et_pb_slider_carousel")&&(et_slider_settings.use_carousel=!0),
                    $this_slider.et_pb_simple_slider(et_slider_settings)

这段代码是这样说的吗：

    if($this_slider.parent().hasClass("et_pb_video_slider"))
                    et_slider_settings.controls_below=!0;
                    et_slider_settings.append_controls_to=$this_slider.parent();
                    setTimeout(function()
                            $(".et_pb_preload").removeClass("et_pb_preload")
                            ,500)
                    ;

    if($this_slider.hasClass("et_pb_slider_carousel"))
            et_slider_settings.use_carousel=!0
            

    $this_slider.et_pb_simple_slider(et_slider_settings);

我读到，使用 && 运算符时，只有在第一部分可以转换为 true 时才评估第二部分，所以我猜它可以像 if 语句一样工作......还是我完全误解了这一点？这样做是为了优化代码吗？保存几个字符？还是这表达的和我想的不一样？

【问题讨论】：

有趣的答案here

表达式et_slider_settings.controls_below=!0; 单独在它自己的行上什么都不做，它只是被评估（除非et_slider_settings.controls_below 实际上是一个getter，它有副作用）。条件中的逗号运算符的操作数也是如此，如果检查操作数中的某些属性没有副作用，则逗号运算符和操作数（不包括最后一个操作数）是无用的。但是，在开发过程中，这是一种从条件中排除某些操作数而无需从字面上删除它们的快速方法，并且它们很容易重新分配。

对不起，离开了，离开前忘了检查线程。 TVYM 回复。我不太确定我是否理解您为什么要排除操作数而不删除它们，但是我不太熟悉检查属性有任何副作用的情况。我想我需要进一步研究一下。

【参考方案1】：

它将执行所有表达式并使用最后一个操作数作为条件。 如果你的最后一个操作数返回 true，那么它就是 true。 用例：在某些情况下，我们可能需要在条件之前执行一些操作。

【讨论】：

对不起，不在了。谢谢你的答复。我在基本层面上使用了逗号，但是我不太熟悉 IF 语句中实际上会导致某些更改发生的操作数 - 对我来说，它们总是用于验证某事的状态，而不是更改某事的状态。