js中的||&&与！用法

Posted 2020-11-03 云上丶无忧

&&和||在JQuery源代码内尤为使用广泛，由网上找了些例子作为参考，对其用法研究了一下：

1.　&&
function a(){
alert("a");
return true;
}
function b(){
alert("b");
return true;
}
var c=a()&&b();
alert(c);
　　a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；

2.　||

function a(){
alert("a");
return true;
}
function b(){
alert("b");
return false;
}
var c=a()||b();
alert(c);
　　a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；

3.　!

js中!的用法是比较灵活的，它除了做逻辑运算常常会用！做类型判断，可以用！与上对象来求得一个布尔值，

（ 1、）！可将变量转换成boolean类型，null、undefined和空字符串取反都为false，其余都为true。
!null=true

    !undefined=true

    !‘‘=true

    !100=false

    !‘abc‘=false   

（2、）！！常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算，在js中新手常常会写这样臃肿的代码：
判断变量a为非空，未定义或者非空串才能执行方法体的内容
var a;
if(a!=null&&typeof(a)!=undefined&&a!=‘‘){
//a有内容才执行的代码
}
实际上我们只需要写一个判断表达：
if(!!a){
//a有内容才执行的代码...
}
　　
就能和上面达到同样的效果。a是有实际含义的变量才执行方法，否则变量null，undefined和‘‘空串都不会执行以下代码。

可以总结出来，“！”是逻辑与运算，并且可以与任何变量进行逻辑与将其转化为布尔值，“!!”则是逻辑与的取反运算，尤其后者在判断类型时代码简洁高效，省去了多次判断null、undefined和空字符串的冗余代码。

    注：&& 优先级高于 ||，逻辑运算符里！的优先级最高

　　alert((1 && 3 || 0) && 4); //结果4 ①
　　alert(1 && 3 || 0 && 4); //结果3 ②
　　alert(0 && 3 || 1 && 4); //结果4 ③

　　分析：
　　语句①：1&&3 返回3 => 3 || 0 返回 3 => 3&&4 返回 4
　　语句②：先执行1&&3 返回3，在执行0&&4返回0，最后执行结果比较 3||0 返回 3
　　语句③：先执行0&&3 返回0，在执行1&&4返回4，最后执行结果比较 0||4 返回 4

　　注：非0的整数都为true，undefined、null和空字符串”" 为false。
&&和||返回的是两个操作数的其中一个。
&&，左操作数为假值时，返回左操作数，否则返回右操作数。||，左操作数为假值时，返回右操作数，否则返回左操作数。
假值有空字符串""，数值0和-0，NaN，false，null和undefined。
仔细想想，&&如果左边为真值，结果就取决右边的操作数。而||如果左为假，则结果取决于右。所以我觉得，js这样做，无伤大雅，并且提供了更好的灵活性。
&&和||还有一个"短路"原则：当左边的结果能决定整个&&/||的结果时，不会执行右边的计算。比如 20 && (i++)+2 这个表达式，先计算&&左边的20得到一个假值0，这个时候无论右边是真是假都不会影响结果(为假，对于js来说就是返回左边的值)，所以就不会去执行右边的运算，也就是说右边的(i++)+1根本就不会得到执行。