首先&&与||是与true与false有关的,我们要明确js中有哪些值为false
<script type="text/javascript"> function isTrue(e){ console.log(e); if(e){ console.log("true"); }else{ console.log("false"); } } isTrue("");//false isTrue('');//false isTrue(0);//false isTrue(false);//false isTrue(null);//false isTrue(undefined);//false isTrue(NaN);//false isTrue("0");//true isTrue("false");//true isTrue({});//true isTrue([]);//true </script>明白了这个,然后我们就来看&&与||的判断逻辑。 a&&b:如果a为false,那么不判断b直接返回a,反之判断b,返回b a||b:如果a为true,那么不判断b直接,返回a,反之判断b,返回b 这里要注意的是,返回的是a与b二者之一,并不会返回true或false 如下:
<script type="text/javascript"> console.log(0||1);//1 console.log(1||0);//1 console.log(1||2);//1 console.log(null||1);//1 console.log(1||null);//1 console.log(0||null);//null console.log(0&&1);//0 console.log(1&&0);//0 console.log(1&&2);//2 console.log(null&&1);//null console.log(1&&null);//null console.log(0&&null)//0 </script>可以利用这个特性来根据服务器传来的值是否为空来赋值 xxx=value||default
还应注意的是,&&的运算优先级高于||
还应注意算术优先级的问题
<script type="text/javascript"> var s="这里是内容" var str="<td style=\"width:25%\" class=\"colorGreen\">"+s||''+"</td>"; console.log(str);//<td style="width:25%" class="colorGreen"> </script>这是因为+运算的优先级高于||,下面是测试:
<script type="text/javascript"> var s1="内容" var str="<td style=\"width:25%\" class=\"colorGreen\">"+s1||''+"</td>"; var str1=("<td style=\"width:25%\" class=\"colorGreen\">"+s1)||(''+"</td>"); var str2=""+s1||''+"</td>"; console.log(str); console.log(str1); console.log(str2); </script> result: <td style="width:25%" class="colorGreen">内容 <td style="width:25%" class="colorGreen">内容 内容 <script type="text/javascript"> var s1="" var str="<td style=\"width:25%\" class=\"colorGreen\">"+s1||''+"</td>"; var str1=("<td style=\"width:25%\" class=\"colorGreen\">"+s1)||(''+"</td>"); var str2=""+s1||''+"</td>"; console.log(str); console.log(str1); console.log(str2); </script> result: <td style="width:25%" class="colorGreen"> <td style="width:25%" class="colorGreen"> </td>