[聚合文章] 编写优雅的 if 语句

JavaScript 1900-01-01 12 阅读

随着项目代码量的增多,如何优化项目代码的健壮性,是一直萦绕在脑海里,却没有停下来好好考虑的事情。总会遇到某一段函数的变量对象就突然找不到属于它的方法了,排除半天,发现参数不知道什么时候变成了undefined。而对于书写if(){}总觉得性价比不高,书写麻烦,占用空间,丑!于是总结许多经常需要写 if语句,但可以用其他代替的情况。主要是变量赋值判断,函数执行判断,多种条件判断。

♨ if 条件语句

  • 逻辑运算符简化 -- 通过参数判断是否执行函数
    编写代码的过程中,我们经常面对的问题可能就是某一个函数所需要的变量可能会因为是undefined导致代码报错,按照一般的编程习惯可能更喜欢写if(Vue ){ console.error("blabla··")},说实话,写的我手疼····。而在Vue的源码中经常看到类似这样的一段代码Vue && console.error("Vue is undefined")
    在逻辑判断过程中,其实也函数执行的过程
·常用写法if(someThing){    toDo();}·优雅写法someThing && toDo();-  逻辑或(||)只要第一个值的布尔值为false,就会永远执行第二位的toDo()函数。逻辑或属于短路操作,第一个值为true时,不再执行第二位的toDo()函数,且返回第一个值。  - 逻辑与(&&)只要第一个值的布尔值为true,那么永远返回第二个值。逻辑与属于短路操作,第一个值为false时,不再执行第二位的toDo()函数,且返回第一个值。
  • 逻辑运算简化多中情况下的变量赋值
var x = a || b 等价于:var x;if(a){    x = a;} else if(b){    x = b;} var x = a && b 等价于:var x = a;if(a){    x = b;}
  • 三目运算
    if(a === true){  a ="真"}else{a ="假"}相当于三目运算 a === true ? "真" : "假"
  • switch/case
    当条件判断数量较大时,可以采用 switch/case代替一长串的eles if(){}
switch (res.state) {        case 'SUCCESS':            //TODO            break;        case 'FAIL':            //TODO            break;        default :            //TODO    }
  • 变量默认值

常用情况是在函数内部,形参作为变量传入,但这个参数也可能不被传入,这时候我们可能就需要写 if(!someName){someName ="rico_wang"}来命名参数的默认值,实际上 someName = someName || "rico_wang"通过逻辑运算符也可以达到同样的效果。

  • 当条件数量较多,但结果可能有共通性时
##例如var name= null;if(a = 1){name = "wang"}else if(a =2 ){name = "li"}else if(a = 3){name = "wang"}else if(a = 4){name = "li"}

完全可以简化为:

var name= null;if(a = 1|| a= 3 ){name = "wang"}else if(a = 2 || a = 4){name = "li"}

总结:那么如何准确的选择更简洁的书写方式呢
1、用作函数执行前,参数存在与否的判断,防止程序出错
2、变量赋值,条件情况只有一种时 使用双目运算对变量进行赋值
3、变量赋值,条件情况为多种,仅选择其中一种情况赋值
4、在 if 条件情况较多,可使用switch/case代替

注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。