JavaScript中&&简写的解释

使用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); 

有人可以解释这个简写并以这样的方式重写这些函数，我可以比较它们以更好地理解我自己的速记吗？

谢谢。

Answer 1

让我们打破你所询问的关于其组件的每个陈述：

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

• 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更可读，虽然它很好对于缩小版本。

Answer 2

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

否定表达式会将其转换为布尔值。 特别是一个否定表达的取决于它是“真实的”还是“虚假的”。

 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('') 

Answer 3

这些可以改写为：

 // 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); } } 

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

1. 使用比爆炸嵌套if s少得多的字符，减少了传递给浏览器的有效负载。
2. 对于训练有素的眼睛，可以更快地阅读。

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

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

Answer 4

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

Answer 5

关于：

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

代码：

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

只会执行if

 w 

是真的。

Answer 6

运用

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

对于此解释，它允许您将多个命令串在一起，同时确保每个命令都为真。

这也可以表示为：

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

它首先确保w计算为true，如果是，则检查w=0是否为真（ w != 0 ）。 如果这也是真的，那么它继续实际的命令。

这是使用延迟评估的许多语言中的常见简写：如果下一个评估使用and （ && ），那么如果返回false，则不会执行以下命令。 这在某些情况下非常有用，在这种情况下，如果前一个语句返回true，您只想对某些事情执行操作，例如：

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

在使用之前确保对象不为null，否则您将访问空指针。