【技巧】写一个更优雅的 if 判断

通常在写代码时，我们总是需要为不同的决定来执行不同的动作。
那我们可以在代码中使用条件语句来完成该任务，当然首选的是if语句。
今天就来讨论一下，怎么写一个更优雅的if判断。

是不是看起来很拽

• 先来一个题吧，用3种方法写出。

请听题：
      如果变量a大于5，那么alter 弹出“吃红烧肉”，否则弹出“吃毛线”。

---

• 那首先就要写第一种写法，也是最常规直接了当的写法：

var a = 4;
if(a<5){
   alert('吃红烧肉');
}else{
   alert('吃毛线');
}

这种说法不用多说了～
 

• 看一下第二种写法吧，很多人都想到了，那就是三目运算符（也叫三元运算符）。

var a = 4;
(a<5)?alert("吃红烧肉"):alert("吃毛线");

问号之前为判断语句。如果为真，则执行第一个表达式，如果为假，则执行第二个表达式
如果还想再学习三元操作符，文中下边会有更多的案例。
 

• 看一下第三种写法，使用短路原理来替代if语句（重要！！！）

var a = 3;
a < 4 && alert("吃红烧肉");
a < 4 || alert("吃毛线");

1. 逻辑与 && 的运算方式
   如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。

var a = 1 && 2;
console.log(a); //返回的结果为 2

如果逻辑与运算符左边的值布尔转换后为false，那么返回左边的值，但是当逻辑与的左边为 null/NaN/undefined ，结果就会得到null/NaN/undefined。

var a = false && 2;
console.log(a); //返回的结果为 false

2. 逻辑或 || 的运算方式
   如果逻辑或运算符左边的值布尔转换后为false，那么返回右边的值（不管右边的值是真还是假）。

var a = false || 2;
console.log(a); //返回的结果为2

如果逻辑或运算符左边的值布尔转换后为true，那么返回左边的值，如果两个操作数都是是null（NaN/undefined），返回null（NaN/undefined）

var a = true || 2;
console.log(a); //返回的结果为 true

---

if语句就不去详细说了，我们来继续看看其他的两种写法还能怎么用吧。

请看图片出的题，点击按钮可以改变文字的颜色，如果文字是黑色，那么点击按钮之后就变成红色，如果文字是红色，点击按钮之后，文字就变成黑色。

这是一个题
在做这道题的时候，点击按钮改变文字的显示状态，如果文字是显示的，那么就隐藏它；如果是隐藏的，那么就显示它。

<button id="btn">按钮</button>
<p id="con" style="display: block">点击按钮控制我显示隐藏</p>

• 当然if语句判断如下：

btn.onclick=function(){
   if(con.style.display=="block"){
       con.style.display="none";
   }else{
       con.style.display="block";
   }
}

• 但是如果我们用三元运算符的话可能就只需要下面这一行代码：

btn.onclick=function(){
           con.style.display=="block"?con.style.display="none":con.style.display="block";
       }

如果想要更过瘾，那么不妨读一下这个代码！

bth.onclick=function(){
   var style = con.style.display;
   con.style.display= style == "block" ? "none":"block"  
   // con.style.display= (style == "block" ? "none":"block") //可读性更高
}

---

• 最后看一个代码书写格式：

function fn1(name,sex){
   //这句话用到了短路原理
   var sex = sex || "男";
   console.log(name+"的性别是"+sex);
}
fn1("lily");

像var sex = sex || "男"这种类似的语句，我们在代码种会经常遇到。
比如这段代码的意思就是，如果用户没有传入第二个参数sex,那么sex在函数种就是undefined
但是为了避免错误，函数写了var sex = sex || "男"这一段话，意思是如果sex为undefined，那么sex就默认为‘男’。
这不就是使用了短路原理吗?

---

结束语
当然if的其他替代写法也有很多，比如switch语句。等等需要我们去探索。
并且三元运算符和短路原理也会在项目里频频出现，也不只是案例这么简单。
希望我们能在以后的代码书写过程种，碰到if语句的时候，能够想到更优雅的方法来替代它。

拜拜，晚安啦