JavaScript —— 与或运算符 || 的使用

灰太狼 2023-06-19 03:00 22阅读 0赞

### 与或运算符||的使用 ###

*   *  举个栗子，如果遇到以下场景
     *   *  &&
         *  ||

## 举个栗子，如果遇到以下场景 ##

*  用户等级1，显示1级；2，显示2级，以此类推
 *  用代码实现如下

**使用if else**

使用switch

var level_text= 0;
    switch(user_level){
    	case 1 :
    	 level_text= '1级';
    	break;
    	case 2 : 
    	level_text= '2级';
    	break;
    	case 3 :
    	 level_text= '3级';
    	break;
    	case 4 : 
    	level_text= '4级';
    	break;
    	default :
    	 level_text= '0级';
    	break;
    }

**这里可以用JavaScript的与或方法在一行代码中实现：**

const level_text= (user_level==1 && '1级') || (user_level==2 && '2级') || (user_level==3 && '3级') || (user_level==4 && '4级') || '0级';}

**更优的做法**

const level_text={'1':'1级','2':'2级','3':'3级','4':'4级'}[user_level] || '0级';

**概念梳理**

*  在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true。这个一定要记住，不然应用||和&&就会出现问题。
 *  很多代码if(!!attr)，为什么不直接写if(attr)；  
    其实这是一种更严谨的写法：  
    请测试`typeof 5`和`typeof !!5`的区别。!!的作用是把一个其他类型的变量转成的bool类型。

**逻辑运算符中的“短路”原理**  
几乎所有语言中||和&&都遵循“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反。  
js也遵循上述原则。但是比较有意思的是它们返回的值。

### && ###

var attr = true && 4 && “aaa“;

那么运行的结果attr就不是简单的true或这false，而是”aaa”

### || ###

代码：var attr = attr || “”;这个运算经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值，这在给函数的参数定义一个默认值的时候比较有用。因为js不像php可以直接在型参数上定义func($attr=5)。再次提醒你记住上面的原则：**如果实参需要是0、""、null、false、undefined、NaN的时候也会当false来处理**。

if(a >=5){
    alert("你好");
    }

可以写成：

a >= 5 && alert("你好");

这样只需一行代码就搞定。但是需要注意的一点就是：js中||和&&的特性帮我们精简了代码的同时，也带来了代码可读性的降低。这就需要我们自己来权衡了。

> 原文链接：https://www.jb51.net/article/21339.htm