类型转换(逻辑运算)
逻辑运算符: && 、|| 、!
&& 、|| : 返回的是值,两者在判断是时候,会将运算符两边的值隐式转换成为布尔值, 然后根据最终返回的布尔值,返回对应的值,具体的判断依据:
&&: 一假则假,同真则真 ===> 逻辑与得到的是第一个为false的值,或第二个为true的值
|| :同假则假,一真则真 ===> 拿到的是第一个为true的值,或第二个为false的值
var a = 3 var b = a-2 && a // 等价于下面 if( a == 2){ b = 0 }else{ b = a }
再来一遍: 转为布尔值为false的六种情况: 0 , “” , NaN , null ,undefined , false
! : 取反,默认转换为布尔值,然后对布尔值取反,他的优先级非常高
if(!a){ 可以进入这里的值: 六种false} if(a == 0){ 隐式转换为0的: 0 ,"0", "" , [0] , ["0"] , false , [] , } if(a == false){ 可以是隐式转为false的,也可以是转为数值0的: false, 0 , "0","", [] , [0] , ["0"] }
- 回忆一下比较运算的判断规则:
- 都是数值,比大小
- 都是字符比ASCII
- 都是数组或对象 ,直接false
- 两边类型不想等,隐式转为数值比较,注意数组和对象会先隐式转为字符串
- ! 的一个常用用途: 开关
开关动画
// html
<div id="move"></div>
// css
<style>
div{
width :50px;
height: 50px;
background-color: red;
left: 0;
top:0
}
</style>
//js
let bool = false ,x = 0
let div = document.getElementById("div1")
div.onclick = function(){
bool = !bool
}
setInterval(()=>{
if(bool) div1.style.left = ++x + "px"
} , 16 )