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

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

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

使用if else

const level_text = 1;
	if(user_level == 1){
		level_text = '1级';
	}
	else if(user_level == 2){
		level_text = '2级';
	}
	else if(user_level== 3){
		level_text = '3级';
	}
	else if(user_level== 4){
		level_text = '4级';
}
else {
	level_text = '0级';
}

使用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