js运算符优先级以及运算符的妙用（精简代码）

本文链接：https://blog.csdn.net/likeuzi/article/details/62037754

下面是逻辑运算符的说明:

运算符	示例	说明
逻辑与 (`&&`)	`expr1&&expr2`	如果expr1 能转换成false则返回expr1,否则返回expr2. 因此, 在Boolean环境中使用时, 两个操作结果都为true时返回true,否则返回false.
逻辑或 (`\|\|`)	`expr1\|\|expr2`	如果expr1能转换成true则返回expr1,否则返回expr2. 因此,在boolean环境(在if的条件判断中)中使用时, 二者操作结果中只要有一个为true,返回true;二者操作结果都为false时返回false.
逻辑非(`!`)	`!expr`	如果单个表达式能转换为true的话返回false,否则返回true.

能够转换为false的表达式有:false,""(空字符串),0和NaN,null,undefined.

能够转化为true的值为:true,任何非空字符串，任何非零数字值(包括无穷大),任何对象

以上规则已经再次确认，摘自"javascript高级程序设计(第3版)"这本书

也就是说在面试题中,第一个值为1,类型是number,该值没有办法转化为false,于是返回第二个值也就是2,这样就可以理解了.

2. 另外JS逻辑计算还有一个短路计算原则,MDN描述如下:

由于逻辑表达式的运算的顺序是从左到右,也可以用以下规则进行"短路"计算:

false && (anything) 短路计算的结果为false.
true || (anything) 短路计算的结果为 true

3.一些简单逻辑运算例子理解

(1)逻辑与

a4=false && (3 == 4)  // f && f 结果为 false
a5="Cat" && "Dog"     // t && t 结果为 Dog

a6=false && "Cat"     // f && t 结果为 false
a7="Cat" && false     // t && f 结果为 false
a8 = true && 4 && "aaa"; //结果为"aaa"

(1)逻辑或

o4=false || (3 == 4)  // f || f 结果为 false
o5="Cat" || "Dog"     // t || t 结果为 Cat
o6=false || "Cat"     // f || t 结果为 Cat(这个例子非常迷惑人)
o7="Cat" || false     // t || f 结果为 Cat

例一：
if( a == 3 ){
alert("OK");
}
简写成：
a==3 && alert("OK");

例二：
var a = 3, b;
if(a == 3){
b = 6;
}
else if(a == 2){
b = 4;
}
else{
b = 1;
}
简写成：
b = a==3 && 6 ||
   a==2 && 4 ||
   1;

例三（不适用场合）：
if( a == 3 ){
alert("Yes");
}
else{
alert("No");
}
按之前的逻辑应该是：
a==3 && alert("Yes") || alert("No");
测试结果为 a == 3 为 true时，alert("Yes") 与 alert("No") 都会执行。
原因： alert("Yes")执行后，因为没有返回值，结果为 undefined ，也就会继续计算右边的表达式。
解决方法：
1.对于没有返回值的函数  // -> a==3 && alert("Yes")==undefined || alert("No");
2.对于返回值为空，或者转换为布尔值为 false 的函数  // -> a==3 && !alert("Yes") || alert("No");

注：短路写法用在特定地方，精炼代码，增强逻辑感，在代码中大批量使用的话，还是不太理想，慎重选择

看经典栗子：提取一个数组的数据，允许提取的数组元素下标为 1、3、6、7、8

var test = (function(arr){
  return function(i){
    if( arr[i] != undefined ){
      if(i==1){
        return arr[i];
      }
      else if(i==3){
        return arr[i];
      }
      else if(i==6){
        return arr[i];
      }
      else if(i==7){
        return arr[i];
      }
      else if(i==8){
        return arr[i];
      }
      else{
        return "没有权限";
      }
    }else{
      return "错误的参数";
    }
  }
})([1,2,3,4,5,6,7,8,9,10]);
test(3) // -> 4
test(6) // -> 7
test(7) // -> 8
test(2) // -> "没有权限"
test(20) // -> "错误的参数"

精简代码：

var test = (function(arr){
  return function(i){
    return arr[i] != undefined && 
           ( i==1&&arr[i] || i==3&&arr[i] || i==6&&arr[i] || i==7&&arr[i] || i==8&&arr[i] || "没有权限" ) ||
           "错误的参数";
    }
})([1,2,3,4,5,6,7,8,9,10]);
test(3) // -> 4
test(6) // -> 7
test(7) // -> 8
test(2) // -> "没有权限"
test(20) // -> "错误的参数"

再简单点：

var test = (function(arr){
  return function(i){
    return i in arr && 
           ( (i==1||i==3||i==6||i==7||i==8) && arr[i] || "没有权限" ) ||
           "错误的参数";
    }
})([1,2,3,4,5,6,7,8,9,10]);
test(3) // -> 4
test(6) // -> 7
test(7) // -> 8
test(2) // -> "没有权限"
test(20) // -> "错误的参数"

强大的表达式，再看另一种栗子

var a = 0;
var b;
function test(i){
  if(i==3){
    b=10;
  }
  else if(i==4){
    b=23;
  }
  else if(i==6){
    b=44;
  }
  else{
   b=null;
  }
}

var a = 0;
var b;
function test(i){
  b = {"3":10, "4":23, "6":44}[i] || null;

运算符的优先级：

在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true.

	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
\|	按位或
&&	逻辑与
\|\|	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值