js逻辑运算符&&、||、！执行顺序

逻辑运算符执行顺序

• &&  逻辑与远算（都真才真/有假就假）
• ||  逻辑或运算 （有真就真/都假才假）
• ! 逻辑非运算 （隐性转换成布尔值，并有取反功能）
• && (逻辑与) 优先级高于||（逻辑或）

&&  逻辑与远算（都真才真/有假就假）

1. 当&&判断条件时，如果发现有一个 false 时，后面条件不会被执行，这种现象为：短路操作。

比如：

var box = document.getElementById("box3") && document.getElementById("box2 ");  
box.style.background = "#eaadea";
//box3 不存在，boxb 存在
//执行到 box3，为 false，所以不往下执行

效果如下：

2. 如果两个条件都为 true，以最后一个 true 为判断。

比如：

var box = document.getElementById("box1") && document.getElementById("box2");  
box.style.background = "#eaadea";
//box1 存在，box2 也存在
//结果 box2 变色

效果如下：

|| 逻辑或运算（有真就真/都假才假）

1. 如果发现有一个 true 时，后面条件不会被执行，这种现象为：短路操作。

比如：

var box = document.getElementById("box1") || document.getElementById("box2");  
box.style.background = "#eaadea";
//box1 存在，box2 也存在
//执行到第一个条件为 true，所以不往下执行，所以结果为第一个变色

效果如下：

2. 如果有一个条件为 false，第二个为 true ，以最后一个 true 为判断。

var box = document.getElementById("box3") || document.getElementById("box2");  
box.style.background = "#eaadea";
//box3 不存在，box2 存在
//执行到第一个条件为 false，所以往下执行，第二个为 true ，所以结果为第 2 个变色

效果如下：

!  逻辑非运算

比如：

var box = 8 > 3；
console.log(!box)//false
console.log(! "") //true

! 可以隐性转换成布尔值，并有取反功能。