javascript “||”、“&&”的靈活運用
- var i=""&&"真值";//->i=""
- i="真值"&&"其他真值";//->i="其他真值"
- i="真值"&&"";//->i=""
- var i=""||"真值";//->i="真值"
- i="真值"||"其他真值";//->i="真值"
- i="真值"||"";//->i="真值"
一、一些晦澀的操作符：
1、(function(){})();
幾乎所有的開源js代碼開篇都是這樣(function(……){……})(……);
下面是Jquery的部分源碼：
- (function( window, undefined ) {
- var jQuery = function( selector, context ) {
- // The jQuery object is actually just the init constructor 'enhanced'
- return new jQuery.fn.init( selector, context );
- },
- // Map over jQuery in case of overwrite
- _jQuery = window.jQuery,
- // Map over the $ in case of overwrite
- _$ = window.$,
- ……
- indexOf = Array.prototype.indexOf;
- // Expose jQuery to the global object
- window.jQuery = window.$ = jQuery;
- })(window);
那麼這個操作符(function(){})();到底是什麼意思呢？
(function(){})中的定義了一個function，緊接着的()表示立即執行這個function。
我們看到Jquery源碼第一個()中是定義了一個匿名function( window, undefined ) {}；接着末尾有個(window)，就表示執行這個匿名function，並傳入參數window。
在匿名function( window, undefined ) {}中，定義了一個局部變量jQuery；然後在末尾我們看到Jquery末尾有一句 window.jQuery = window.$ = jQuery; 這句代碼就表示，將此前定義的jQuery導出到window對象。這也是爲什麼我們可以在代碼任何地方直接使用$、jQuery對象，因爲在這裏已經將$、jQuery對象掛載到window下去了，而window.$、window.jQuery與直接使用$、jQuery是沒有區別的。
（注意，這個window對象是傳入的參數window，而不是瀏覽器window對象！！一個形參、一個實參。我們可以在定義function的時候，將參數window取名爲其他字符。所以我們看到jquery.min.js中這個匿名function變成了(function(E,B){})(window);）
通常(function(){})()用來封裝一些私有成員或者公共成員的導出。
2、令人迷惑的","
我們知道“,”一般用於一次定義多個變量、定義多個參數等。像上面的jQuery源碼中在var jQuery後面，使用“,”一次定義了很多個變量。
但是，像下面的代碼，可能大家就不一定看得懂了：
- //html：<input type="hidden" value="king" id="nameHide"/>
- jQuery(document).ready(function() {
- var showName=function(){
- var value,nameInput=$("#nameHide");
- return nameInput.show(),value=nameInput.val();
- };
- alert(showName());
- });
- //結果：彈出king
這裏的“nameInput.show(),value=nameInput.val()”中的“,”運算符的作用是返回","右側表達式的值。所以，return 後面如果有多個表達式，且表達式之間由","隔開，整個return表達式返回的是最後一個","右側的表達式的值。
“,”在開源代碼中常常被用於return表達式中，以及跟下面我們要講到的"()"運算符一起使用。
3、“()”廣義上的代碼包裝
我們遇到複雜的邏輯表達式時，我們通常會把需要一起運算的表達式用“()”包起來：(a||b)&&(c||d)
其實，我們可以這樣理解："()"運算符將一個表達式包裹起來作爲一個整體進行運算，然後返回這個整體的值。
那麼上面的(function(){})()中左側定義function的()也是這個作用，將這個function給包裹起來，然後返回這個function。我們調用方法一般是a();那麼(function(){})的作用就是返回這個function對象，然後(function(){})()右側的()表示調用這個function。
我們再來看其他的用法：
- //html：<input value="kings" id="name"/><div id="nameErrorTip">輸入錯誤！</div>
- jQuery(document).ready(function() {
- var nameValidate=function(){
- var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip");
- return (value=nameInput.val(),value=="king")?(nameErrorTip.hide(),"對了，輸入爲king！"):(nameErrorTip.show(),"請輸入king!");
- };
- alert(nameValidate());
- });
- //結果 nameErrorTip顯示，彈出"請輸入king!"
- //html：<input value="king" id="name"/><div id="nameErrorTip">輸入錯誤！</div>
- //結果 nameErrorTip隱藏，彈出"對了，輸入爲king！"
這裏“ (value=nameInput.val(),value=="king")”中"()"將裏面的表達式作爲一個整體進行運算，而裏面的表達式又是由","構成的多個表達式組，所以執行的時候會把這多個表達式都執行一次，並且返回最後一個表達式的值！
所以 (value=nameInput.val(),value=="king")執行時，先運算value的值，再判斷是否爲"king"。如果爲king，會執行(nameErrorTip.hide(),"對了，輸入爲king！")。這個表達式又先將nameErrorTip隱藏，再返回一個"對了，輸入爲king！"字符串作爲 整個return的值。