js 利用||和&&赋值小技巧

朱雀 2021-09-26 17:42 353阅读 0赞

对于需要返回boolean类型数值的地方，比如if判断，逻辑运算符，js对象会默认转换为boolean类型数据。null，undefined，0，”“返回false，其他返回true。

同时，对于||与&&又有这样的特性：

var a = b || c;

<table> 
 <thead> 
  <tr> 
   <th>b默认值</th> 
   <th>c默认值</th> 
   <th>a取值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>true</td> 
   <td>true</td> 
   <td>b</td> 
  </tr> 
  <tr> 
   <td>true</td> 
   <td>false</td> 
   <td>b</td> 
  </tr> 
  <tr> 
   <td>false</td> 
   <td>true</td> 
   <td>c</td> 
  </tr> 
  <tr> 
   <td>false</td> 
   <td>false</td> 
   <td>c</td> 
  </tr> 
 </tbody> 
</table>

var a = b && c;

<table> 
 <thead> 
  <tr> 
   <th>b默认值</th> 
   <th>c默认值</th> 
   <th>a取值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>true</td> 
   <td>true</td> 
   <td>c</td> 
  </tr> 
  <tr> 
   <td>true</td> 
   <td>false</td> 
   <td>c</td> 
  </tr> 
  <tr> 
   <td>false</td> 
   <td>true</td> 
   <td>b</td> 
  </tr> 
  <tr> 
   <td>false</td> 
   <td>false</td> 
   <td>b</td> 
  </tr> 
 </tbody> 
</table>

根据这两个特性，可以利用||与&&进行赋值。在某些情况下，可以简化代码，甚至是增加可读性。

下面给出的几组代码内的b与c的赋值是等效的。

var b;
    
        if(b != null){
            b = b;
        }else {
            b = 2;
        }
    
        var c = c || 2;

var b;
    
        if(b){
            b = 1;
        }else {
            b = 2;
        }
    
        var c = (c && 1) || 2;

var b;
    
        if(b){
            if(1 == 1){
                b = 1;
            }else {
                b = 2;
            }
        }else {
            b = 3;
        }
    
        var c = (c && ((1 == 1 && 1) || 2)) || 3;

var b;
    
        if(2 > 1){
            b = 1;
        }else if(3 > 1){
            b = 2;
        }else {
            b = 3;
        }
    
        var c = ((2 > 1) && 1) || ((3 > 1) && 2) || 3;

var b;
    
        if(2 > 1){
            b = 1;
        }else if((1 == 1 || 1 == 2) && 3 == 3){
            b = 2;
        }else {
            b = 3;
        }
    
        var c = ((2 > 1) && 1) || (((1 == 1 || 1 == 2) && 3 == 3) && 2) || 3;

简单说一下技巧，就是if->值 用&&，else用||，if中内容多的可以将内容都写进括号里。

在实际使用中，只有最简单的逻辑判断使用这种方法有实际意义，这会使代码更简洁。事实上，很多知名的js框架都充满了这种用法。至于后面那些个写法，别用！！！写出来容易被打。