Javascript 的逻辑运算符的使用技巧和其内在逻辑

Javascript是一个弱类型的语言,也体现在了对表达式的逻辑计算上。对于Java等强类型的语言,进行逻辑判断时,如 if(condition) 中condition所表示的表达式,其结果必须是返回的为true或false的表达式,而javascript 则不然,它可以允许condition是 Number,String,或者Object对象,也可以是undefined 或null的变量,在这方面体现了很大的灵活性。JavaScript引擎会对if(condition)
中condition 的值先进行ToBoolean操作,即将condition的值转换成boolean逻辑值,其ToBoolean的规则如下:

本文主要详细讨论上述的condition参数类型的转换,以及更为"诡异"的 与(&&) 和 或(||)运算符,以及它们的内在逻辑。

1. ToBoolean 逻辑值自动转换

使用过强类型的语言的读者应该知道,在使用逻辑判断时,我们提供的逻辑表达式一定是能够返回true或者是false的,如下的Java代码所示:

	String s;
	if(s==null)
	{
	   //some logic ....
	}

对于上述的s,在if()内的表达式,必须能够返回true或者false,我们不能写成if(s),否则Java编译器会报错。对于若类型的JavaScript语言而言,它有着不同的认识角度:它认为没有被定义的变量或者值为null 的变量,用在逻辑判断时,应该返回false;而对于存在的Object对象而言,应该返回true;对于数字而言,+0,-0,或者NaN,应该是返回false,反之返回true;而对于String,如果是空字符换,则认为是false,否则为true。

2. ! 和!! 运算符 与类型强制转换

通常,我们可以在if(condition) 的condiction直接使用Object、String、Number、null、undefined值或者变量,Javascript引擎会自动地将condition进行ToBoolean操作比如,对于一个var  s="abc" 的字符串,如果进行if(s),Javascript引擎会计算s的boolean值,由于s 不是空字符串,则会返回true:

	var s="abc";
	if(s)
	{
	   alert("true");
	}

当然,我们也可以手动地转换它。我们可以使用 非运算符! 让表达是转换成对应的boolean值的相反值。如下所示:

	var s="abc";
	var flag = !s;
	console.log(flag);//~output:false
	console.log(typeof flag);//~output:boolean

由上可知,经过对s进行了!操作后,flag值为boolean类型的,并且值为false,这就是强制类型转换!但是这里的结果值和实际值相反,所以,我们用!!s
还原成原始的逻辑值:

	var s="abc";
	var flag = !!s;
	console.log(flag);//~output:true
	console.log(typeof flag);//~output:boolean

注意 !!s中的!!这两个非运算符,它们起到的作用有很大的不同哦,最右边的 !运算符,首先是Javascript首先对s进行了强制类型转换,然后再进行非操作,左边的!非操作符则是简单的非运算。
如果大家有阅读过Javascript框架如prototype或者jquery的经历,对于代码中的 两个!形式的运算符!! 就不足为奇了。
!! 运算符的作用就是将不同类型的参数转换成对应的表示的逻辑值
,如下代码所示:

	//1.x未被定义赋值,值为undefined
	var x;
	var flag1 = !!x;
    console.log(flag1);	//~output: false

	//2. y 为null
	var y= null;
	var flag2 = !!y;
	console.log(flag2);//~output: false

	//3. number类型的值分别为:+0,-0,NaN,34
	var z1 = (+0),
		z2=(-0),
		z3=NaN,
		z4=34;
	var flag3=!!z1,
		flag4=!!z2,
		flag5=!!z3,
		flag6=!!z4;
	console.log(flag3,flag4,flag5,flag6);//~output: false,false,false,true

	//4.string类型的值,为"" 和"abc"
	var s1="",
		s2="abc";
	var flag7= !!s1,
		flag8=!!s2;
	console.log(flag7,flag8);//~output: false,true

	//5.object 对象
	var obj ={};
	var flag9=!!obj;
	console.log(flag9);//~output: true

3. && 和|| 运算符

短路与 &&运算符

Javascript 的双目运算符&& 和|| 分别完成 短路与 和 短路或 的功能。现在先看 && 运算符。一般&& 运算符的使用有以下格式:

	 if(statement1 && statement2 )
	 {
	    //some logic ...
	 }

上述的 statemetnt1 && statement2 语句,只有当statement1 和statement2 同时为true时,statemetnt1 && statement2 才会返回true。 若statement1 和statement2 有任何一个为false,statemetnt1 && statement2都为false。不过短路与 更加智能化,javascript在解析statemetnt1
&& statement2 语句时,按照从左到右的顺序解析,如果statement1 为false,则statemetnt1 && statement2返回必然为false,于是javascript不再解析statement2,直接返回false。

如下所示:

	 var object ={};
	 if(object && true)
	 {
	    console.log("true");//~output:true
	 }
	 console.log(false && object)//~output:false

statemetnt1 && statement2 语句的执行逻辑

实际上,  statemetnt1 && statement2 的语句返回值并不是准确意义上的true或者false。

来看下面的例子:

    var object ={};
    var result = (true && object);
    console.log(typeof result);//~output: object
    console.log(result === object);//~output: true
    var result1 = (null && false);
    console.log(result1 ===null);

从上述的代码可以看出,true && object 返回的是第二个参数object,而不是经过计算过的Boolean值;另外,如果第一个参数的Boolean值为false,其返回的也不是参数对应的Boolean值,而是参数本身,null 的Boolean的值为false,但是result1的值为null,而不是对应的boolean值。

其实 statement1 && statement2 语句的执行逻辑是这样的:

	// statement1 && statement2 等价于:
	{
	    if(statement1)
		{
		    return statement2;
		}
	    return statement1;
	}

如果statement对应的逻辑值 为true,则返回statement2;否则返回statement1(尽管statement1 的逻辑boolean值为false,但是还是返回statement1本身)

当然,如果使用者想强制获取到 statemetnt1 && statement2 的boolean 值,可以使用!!,即!!(statemetnt1 && statement2)。

短路或 || 运算符 以及它的执行逻辑

一般 || 运算符使用格式如下所示:

	if(statement1 || statement2)
	{
	  // some logic .....
	}

和&& 运算符想对应,||运算符的执行逻辑如下:

	// statement1 || statement2 等价于:
	{
	    if(statement1)
		{
		    return statement1;
		}
	    return statement2;
	}

即|| 运算符的逻辑为,如果statement1 对应的Boolean值为true,则直接返回statement1 否则返回statement2。

例子如下:

	var object ={};
	var result = (object||false);
	var result2 = (false ||object);
	console.log(result === object); //~output: true
	console.log(result2 === object);//~output: true
	console.log(typeof result);//~output: object
	console.log(typeof result2);//~output: object
时间: 2024-10-05 00:07:19

Javascript 的逻辑运算符的使用技巧和其内在逻辑的相关文章

JavaScript中逻辑运算符

一.JavaScript“逻辑”运算符 很多学习 JavaScript的人,容易被 JavaScript 的逻辑运算符的运算规则搞晕.为什么呢?因为JavaScript的逻辑运算符和其他语言(比如:java.c#.c等)有着很大的不同.其他那些强类型的语言的逻辑运算符参数运算的都是 true或false,结果也一定是true或false,很容器理解和记住.而JavaScript的"逻辑运算符"参与运算的可以是任意类型,结果也可能是任意类型,规则及其复杂.所以,JavaScript中,他

更快学习 JavaScript 的 6 个思维技巧---分享

更快学习 JavaScript 的 6 个思维技巧 2015-10-10 全栈开发者中心 我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候. 找不到时间(有时是动力)学习. 很容易忘记已经理解了的东西. 工具多又在不断变化,所以不知道从哪里开始. 幸运的是,这些拦路虎是可以被识别,并消灭的.在这篇文章中,我将介绍六个思维技巧来帮助你更快地学习JavaScript,并成为一个更快乐.更富有成效的程序

帮助你更快学习JavaScript的六个思维技巧

? ? ? ? ? ? ? ? 当人们试图学习JavaScript或其他编程语言的时候,他们通常会遇到如下挑战. 一些概念让他们感到困惑,特别是如果之前学过其他类型的语言. 很难找到学习的时间(或者动力)去学习. 你很容易忘掉之前学到的东西. JavaScript工具太多并且经常更新,以至于很难找到学习的切入点. 幸运的是,这些难题最终能够被克服.在这篇文章,我将展示六个能够帮助你更快.更开心.更高效地学习JavaScript的六个思维技巧. 1   不要让未来的忧虑干扰你现在的学习 有些Jav

【斗地主技巧】斗地主算法逻辑中的天之道<转>

******************************************************************** 作者比较喜欢玩斗地主,所以经常搜集一些网友斗地主的心得,下面这一篇,我感觉写得不错,特转载,与网友分享.原文链接 棋牌游戏推荐:JJ比赛 我比较喜欢在这上面玩,可以赢话费,而且积累的金币其实是可以兑换成人民币的,网上有人回收. *******************************************************************

Chrome 中的 JavaScript 断点设置和调试技巧

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript 断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的

前端网络、JavaScript优化以及开发小技巧

一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN缓存 通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉. 之所以要做合并压缩是因为:HTTP 1.x不允许一个连接上的多个响应数据交错到达(多路复用),因而一个响应必须完全返回后,下一个响应才会开始传输. 也就是说即使客户端同时发送了两个请求,而且CSS资源先准备就绪,服务器也会先发

javascript运算符——逻辑运算符

× 目录 [1]逻辑非 [2]逻辑与 [3]逻辑或 前面的话 逻辑运算符对操作数进行布尔运算,经常和关系运算符一样配合使用.逻辑运算符将多个关系表达式组合起来组成一个更复杂的表达式.逻辑运算符分为逻辑非'!'.逻辑与'&&'.逻辑或'||'3种,本文将介绍这三种逻辑运算符 逻辑非 逻辑非操作符由一个叹号(!)表示,可以应用于ECMAScript中的任何值.无论这个值是什么数据类型,这个操作符都会返回一个布尔值.逻辑非操作符首先会将它的操作数转换成一个布尔值,然后再对其求反 逻辑非对操作数转

Chrome 中的 JavaScript 断点设置和调试技巧 (转载)

原文地址:http://han.guokai.blog.163.com/blog/static/136718271201321402514114/ 你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其

更快学习 JavaScript 的 6 个思维技巧

我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候. 找不到时间(有时是动力)学习. 很容易忘记已经理解了的东西. 工具多又在不断变化,所以不知道从哪里开始. 幸运的是,这些拦路虎是可以被识别,并消灭的.在这篇文章中,我将介绍六个思维技巧来帮助你更快地学习JavaScript,并成为一个更快乐.更富有成效的程序员. 1.不要让未来的决策阻止你现在前进的方向 很多人学习JavaScript,问的第一个