js的&&与||的那些事

首先&&与||是与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>