解釋&&在JavaScript中的簡寫

使用jQuery的水印插件，我試圖jslint並儘量減少函數，但我遇到過我從未見過的語法，其中有真正應該是一個表達式的表達式轉讓或函數調用：解釋&&在JavaScript中的簡寫

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

有人可以解釋這種簡寫並重寫這些函數，以便我可以比較它們以更好地理解速記本身嗎？

謝謝。

來源

2010-10-04 S16

呃，單字母局部變量。 – BoltClock 2010-10-04 21:57:18

讓我們打破每個你問到他們的組件聲明：

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更具可讀性，儘管它是適用於縮小版本。

來源

2010-10-04 21:58:57

更不用說單字母局部變量。 – BoltClock 2010-10-04 22:10:51

@ BoltClock's - 我*打賭*這是由於minfication，雖然看起來像所有這些。如果您使用的是Chrome瀏覽器，我建議您使用https://chrome.google.com/extensions/detail/nipdlgebaanapcphbcidpmmmkcecpkhg以獲得完整性:) – 2010-10-04 22:16:53

*爲什麼我還沒死？* – BoltClock 2010-10-04 22:19:02

& &是和。它用於比較/複合條件語句。它要求if語句中的兩個條件都爲真。我認爲沒有其他方法來重寫它 - 這是And的語法。

來源

2010-10-04 21:55:53

關於：

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

的代碼：

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

如果

是truthy將只執行。

來源

2010-10-04 21:58:18

這些可以被改寫爲：

// 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秒的簡寫。它的優點是：

使用比爆炸嵌套if的人物略有減少，減少投放給瀏覽器的有效載荷。
對於訓練有素的眼睛可以更快地閱讀。

雖然，我必須說上面的例子是濫用這種速記，因爲使用的條件相當複雜。當我需要在下面的例子來檢查的簡單的事情鏈就像我只能求助於這種簡寫：

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

來源

2010-10-04 21:59:23

&&可以作爲「防護」。基本上這意味着如果其中一個操作數返回「falsy」值，則停止評估表達式。

否定表達式會將其轉換爲布爾值。具體而言，取決於它是'truthy'還是'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('')

來源

2010-10-04 22:00:49

使用

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)

，確保對象是在使用前沒有空，否則你會訪問空指針。

來源

2010-10-04 22:01:05 Tarka

解釋&&在JavaScript中的簡寫

回答

相關問題