js中的逻辑运算符详解(||、&&、!)

视频地址：https://www.bilibili.com/video/BV1Y7411K7zz?p=1

一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今天才发觉以前的认知是错误的。因为js中不光可以处理false或true类型的,同时返回的值也不一定是true或false，他们的结果可以是任意类型。

Js中的逻辑运算符

JavaScript中有三个逻辑运算符，&&与、||或、!非，虽然他们被称为逻辑运算符，但这些运算符却可以被应用于任意类型的值而不仅仅是布尔值，他们的结果也同样可以是任意类型。

描述

如果一个值可以被转换为true，那么这个值就是所谓的truthy，如果可以被转换为false，那么这个值就是所谓的falsy。会被转换为false的表达式有: null、NaN、0、空字符串、undefined。

尽管&&和||运算符能够使用非布尔值的操作数，但它们依然可以被看作是布尔操作符，因为它们的返回值总是能够被转换为布尔值，如果要显式地将它们的返回值或者表达式转换为布尔值，可以使用双重非运算符即!!或者Boolean构造函数。

• &&: AND，逻辑与，expr1 && expr2，若expr1可转换为true则返回expr2，否则返回expr1。
• ||: OR，逻辑或，expr1 || expr2，若expr1可转换为true则返回expr1，否则返回expr2。
• !: NOT，逻辑非，!expr，若expr可转换为true则返回false，否则返回true。

短路计算

由于逻辑表达式的运算顺序是从左到右，是适用于短路计算的规则的，短路意味着下面表达式中的expr部分不会被执行，因此expr的任何副作用都不会生效。造成这种现象的原因是，整个表达式的值在第一个操作数被计算后已经确定了。

• (some falsy expression) && (expr)短路计算的结果为假。
• (some truthy expression) || (expr)短路计算的结果为真。

强制转换类型

使用双重非运算符能够显式地将任意值强制转换为其对应的布尔值，这种转换是基于被转换值的truthyness和falsyness的。

console.log(!!true);                   // true
console.log(!!{});                     // true // 任何对象都是truthy的
console.log(!!(new Boolean(false)));   // true // 此为对象而不是字面量
console.log(!!false);                  // false
console.log(!!"");                     // false
console.log(!!Boolean(false));         // false // 调用构造函数生成字面量

演示示例

/* javascript中除了以下这些之外,其余都为真:
*  0、""、null、false、undefined、NaN
*/

		//逻辑与(&&)算法：
		//如果第一个为true , 则返回第二个值
		//如果第一个为false, 则返回false
		alert('=============================&&=============================');
		alert(true && false);	//-->false
		alert(false && true);	//-->false
		alert(true && 'aaa');	//-->aaa
		alert('aaa' && true);	//-->true
		alert(false && 'aaa');	//-->false
		alert('aaa' && false);	//-->false
		alert('aaa' && 'bbb');	//-->bbb
		alert(null && 'aaa');	//-->null
		alert('aaa' && undefined);	//-->''
		alert('aaa' && '');		//-->''
		alert('aaa' && NaN);	//-->NaN

		//逻辑或(||)算法：
		//如果第一个为true , 则true
		//如果第一个为false, 则返回第二个值
		alert('=============================||=============================');
		alert(true || false);	//-->true
		alert(false || true);	//-->true
		alert(true || 'aaa');	//-->true
		alert('aaa' || true);	//-->aaa
		alert(false || 'aaa');	//-->aaa
		alert('aaa' || false);	//-->aaa
		alert('aaa' || 'bbb');	//-->aaa
		alert(null || 'aaa');	//-->aaa
		alert('aaa' || undefined);	//aaa
		alert('aaa' || '');		//-->aaa
		alert('aaa' || NaN);	//-->aaa

		//逻辑非( ! )算法：
		//将值转换为boolean值,类似于parseBoolean()操作(注意:说的是类似哦,事实上js并没有parseBoolean方法哈)
		alert('=============================!=============================');
		alert(! 'aaa');		//-->false
		alert(!! 'aaa');	//-->true
		alert(! NaN);		//-->true
		alert(!! '');		//-->false