js “||”、“&&”的灵活运用

javascript “||”、“&&”的灵活运用

如果&&左侧表达式的值为真值，则返回右侧表达式的值；否则返回左侧表达式的值。

Js代码  

1. var i=""&&"真值";//->i=""  
2. i="真值"&&"其他真值";//->i="其他真值"  
3. i="真值"&&"";//->i=""  

 

如果||左侧表达式的值为真值，则返回左侧表达式的值；否则返回右侧表达式的值。

Js代码  

1. var i=""||"真值";//->i="真值"  
2. i="真值"||"其他真值";//->i="真值"  
3. i="真值"||"";//->i="真值"  

 

http://my249645546.iteye.com/blog/1716629

一、一些晦涩的操作符：

1、(function(){})();

几乎所有的开源js代码开篇都是这样(function(……){……})(……);

下面是Jquery的部分源码：

 

Js代码  

1. (function( window, undefined ) {  
2.     var jQuery = function( selector, context ) {  
3.         // The jQuery object is actually just the init constructor 'enhanced'  
4.         return new jQuery.fn.init( selector, context );  
5.     },  
6.   
7.     // Map over jQuery in case of overwrite  
8.     _jQuery = window.jQuery,  
9.   
10.     // Map over the $ in case of overwrite  
11.     _$ = window.$,  
12.     ……  
13.     indexOf = Array.prototype.indexOf;  
14.   
15.     // Expose jQuery to the global object  
16.     window.jQuery = window.$ = jQuery;  
17. })(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后面，使用“,”一次定义了很多个变量。

但是，像下面的代码，可能大家就不一定看得懂了：

 

Js代码  

1. //html：<input type="hidden" value="king" id="nameHide"/>  
2. jQuery(document).ready(function() {  
3.     var showName=function(){  
4.         var value,nameInput=$("#nameHide");  
5.         return nameInput.show(),value=nameInput.val();  
6.     };  
7.     alert(showName());  
8. });  
9. //结果：弹出king  

 这里的“nameInput.show(),value=nameInput.val()”中的“,”运算符的作用是返回","右侧表达式的值。所以，return 后面如果有多个表达式，且表达式之间由","隔开，整个return表达式返回的是最后一个","右侧的表达式的值。

 

“,”在开源代码中常常被用于return表达式中，以及跟下面我们要讲到的"()"运算符一起使用。

 

3、“()”广义上的代码包装

我们遇到复杂的逻辑表达式时，我们通常会把需要一起运算的表达式用“()”包起来：(a||b)&&(c||d)

其实，我们可以这样理解："()"运算符将一个表达式包裹起来作为一个整体进行运算，然后返回这个整体的值。

那么上面的(function(){})()中左侧定义function的()也是这个作用，将这个function给包裹起来，然后返回这个function。我们调用方法一般是a();那么(function(){})的作用就是返回这个function对象，然后(function(){})()右侧的()表示调用这个function。

 

我们再来看其他的用法：

 

 

Js代码  

1. //html：<input value="kings" id="name"/><div id="nameErrorTip">输入错误！</div>  
2. jQuery(document).ready(function() {  
3.     var nameValidate=function(){  
4.         var value,nameInput=$("#name"),nameErrorTip=$("#nameErrorTip");   
5.         return (value=nameInput.val(),value=="king")?(nameErrorTip.hide(),"对了，输入为king！"):(nameErrorTip.show(),"请输入king!");  
6.     };  
7.     alert(nameValidate());  
8. });  
9.   
10. //结果 nameErrorTip显示，弹出"请输入king!"  
11.   
12.   
13.   
14. //html：<input value="king" id="name"/><div id="nameErrorTip">输入错误！</div>  
15. //结果 nameErrorTip隐藏，弹出"对了，输入为king！"  

 

 

这里“ (value=nameInput.val(),value=="king")”中"()"将里面的表达式作为一个整体进行运算，而里面的表达式又是由","构成的多个表达式组，所以执行的时候会把这多个表达式都执行一次，并且返回最后一个表达式的值！

所以 (value=nameInput.val(),value=="king")执行时，先运算value的值，再判断是否为"king"。如果为king，会执行(nameErrorTip.hide(),"对了，输入为king！")。这个表达式又先将nameErrorTip隐藏，再返回一个"对了，输入为king！"字符串作为 整个return的值。