JavaScript 中 && 简写的解释答案

【问题标题】：An explanation of && shorthand in JavaScriptJavaScript 中 && 简写的解释
【发布时间】：2011-04-21 00:58:36
【问题描述】：

使用 jQuery 的水印插件，我正在尝试 jslint 并最小化函数，但我遇到了我以前从未见过的语法，其中有些表达式确实应该有赋值或函数调用：

(function($) {

    $.fn.watermark = function(css, text) {

        return this.each(function() {

            var i = $(this), w;

            i.focus(function() {
                w && !(w=0) && i.removeClass(css).data('w',0).val('');
            })
                .blur(function() {
                    !i.val() && (w=1) && i.addClass(css).data('w',1).val(text);
                })
                .closest('form').submit(function() {
                    w && i.val('');
                });

            i.blur();
        });
    };

    $.fn.removeWatermark = function() {

        return this.each(function() {

            $(this).data('w') && $(this).val('');
        });
    };
})(jQuery);

我对以下几行特别感兴趣：

w && !(w=0) && i.removeClass(css).data('w',0).val('');

和

!i.val() && (w=1) && i.addClass(css).data('w',1).val(text);

有人可以解释这个速记并重写这些函数，以便我可以比较它们以更好地理解速记吗？

谢谢。

【问题讨论】：

呃，单字母局部变量。

标签： javascript jquery shorthand

【解决方案1】：

这些可以改写为：

// w && !(w=0) && i.removeClass(css).data('w',0).val('');
if (w) {
    if (!(w=0)) {
        i.removeClass(css).data('w',0).val('');
    }
}

//!i.val() && (w=1) && i.addClass(css).data('w',1).val(text);
if (!i.val()) {
    if (w=1) {
        i.addClass(css).data('w',1).val(text);
    }
}

像这样使用&& 只是使用嵌套ifs 的简写。它的优点是：

使用的字符比展开的嵌套 ifs 略少，从而减少了传递给浏览器的负载。
对于受过训练的眼睛可以更快地阅读。

不过，我必须说上面的例子是对这种速记的滥用，因为使用的条件相当复杂。当我需要检查一系列简单的事情时，我只使用这个速记，如下例所示：

function log(s) {
    window.console && console.log && console.log(s);
}

【讨论】：

【解决方案2】：

使用

w && !(w=0) && i.removeClass(css).data('w',0).val('');

对于这个解释，它允许您将多个命令串在一起，同时确保每个命令都是正确的。

这也可以表示为：

if (w) {

    w = 0;
    i.removeClass(css).data('w',0).val('');
}

它首先确保w 的计算结果为真，如果是，它检查w=0 是否不为真(w != 0)。如果这也是真的，那么它会继续执行实际的命令。

这在许多使用惰性求值的语言中很常见：如果下一次求值是用and (&&) 进行的，那么如果返回 false，则不会执行以下命令。这在您只想在前一个语句返回 true 时对某事执行操作的情况下很有用，例如：

if (object != null && object.property == true)

在使用它之前确保对象不为空，否则你将访问一个空指针。

【讨论】：

【解决方案3】：

让我们将您询问的每个陈述分解为它们的组成部分：

w && !(w=0) && i.removeClass(css).data('w',0).val('');

w - w 是“真的”吗？（在这种情况下检查 != 0）
!(w=0) - 将 w 设置为 0，取与结果相反的结果，以便 && 链继续
i.removeClass(css).data('w',0).val('') - 移除类，设置数据为0 清除值。

!i.val() && (w=1) && i.addClass(css).data('w',1).val(text);

!i.val() - 输入是否为空？
(w=1) - 将 w 设置为 1
i.addClass(css).data('w',1).val(text); - 添加类，将数据设置为 1 并将文本设置为水印文本。

这两者都只是真正减少代码的声明，当然是以牺牲可读性为代价的。如果您正在查看缩小版，这很常见，如果您不是并且这是原版，请用沙拉叉追赶作者，原版应该比原版更具可读性这个 IMO，虽然它对于缩小版来说很好。

【讨论】：

更不用说单字母局部变量了。
@BoltClock's - 我打赌这是缩小的结果，但所有看起来都是这样。如果您使用的是 Chrome，我建议您使用 chrome.google.com/extensions/detail/… 以保持理智 :)
+1 用于解释 !(w=0) 的（可怕的）技巧。我有一种讨厌的感觉，这是故意写成这样的：在 jQuery 和插件作者中似乎很常见，以尽可能地编写最荒谬的简洁代码，可读性被诅咒。过度链接和滥用&& 是最喜欢的伎俩。
@bobince - 同意，我更喜欢可读的版本，尽管缩小器会做任何他们想做的事情。
在w && !(w=0) && i.removeClass(css).data('w',0).val(''); 中，如果!(w=0) 导致false 会发生什么？

【解决方案4】：

&& 可以用作“守卫”。基本上，这意味着如果其中一个操作数返回“假”值，则停止评估表达式。

否定表达式会将其转换为布尔值。具体来说，它是对表达式的否定，具体取决于它是“真实”还是“虚假”。

w && !(w=0) && i.removeClass(css).data('w',0).val('');

基本上说：

w is "truthy" (defined, true, a string, etc.)
AND set w to zero + convert the expression to true (because (w=0) would evaluate to 0, which is falsy)
AND evaluate i.removeClass(css).data('w',0).val('')

【讨论】：

【解决方案5】：

关于：

w && !(w=0) && i.removeClass(css).data('w',0).val('');

代码：

!(w=0) && i.removeClass(css).data('w',0).val('');

只有在以下情况下才会执行

是真实的。

【讨论】：

【解决方案6】：

&& 是和。它用于比较/复合条件语句。它要求 if 语句中的两个条件都为真。我认为没有其他方法可以重写它 - 那是 And 的语法。

【讨论】：