大家好，我是CUGGZ。在日常开发中，我们经常会写一些条件语句。太多的if...else会使代码难以理解和维护。今天分享几个优化条件语句的小技巧！1.Array.includes看下面代码：functiontest(animal){if(animal=='lion'||animal=='dog'){returnanimal;}return'';}test('dog');在test方法中包含一个if语句来判断传入的参数animal是狮子还是狗。这样写在语法上是没问题的，但是如果if的判断条件不是只有两只动物，而是四只动物。如果您继续使用||AND运算符，代码将难以维护并且看起来很不优雅：if(animal=='lion'||animal=='dog'||animal=='cow'||animal=='cat'){returnanimal;}对于这种需要对同一个变量进行多次判断的条件语句，可以使用数组的includes()方法进行优化，可用于判断数组中是否存在指定元素。如果指定的元素存在，则返回true，如果不存在，则返回false。使用includes()修改上面的代码：if(['dog','cat','cow','lion'].includes(animal)){returnanimal;}这段代码看起来简洁多了，而如果要继续添加其他动物，只需要继续添加数组中的元素即可。2.Array.every看下面代码：constcars=[{name:'car1',color:'red'},{name:'car2',color:'blue'},{name:'car3',颜色：'紫色'}];功能测试（汽车）{让isAllblue=true;for(letcofcars){if(!isAllblue)break;isAllblue=(c.color=='blue');}returnisAllblue;}test(cars);JavaScript中的数组提供了every()方法，该方法用于检查数组中的所有元素是否满足给定条件。当每个数组元素满足给定条件时返回真，否则返回假。你可以使用这个方法来优化上面的代码：constcars=[{name:'car1',color:'red'},{name:'car2',color:'blue'},{name:'car3',颜色：'紫色'}];功能测试（汽车）{returncars.every（c=>c.color=='blue'）;}测试（汽车）;3.尽早返回在JavaScript中，尽快返回是一种将函数体简化为else语句的简单方法。看下面的代码：functiontest(fruit,quantity){constredFruits=['apple','strawberry','cherry','cranberries'];如果（水果）{如果（redFruits.includes（水果））{console.log（'red'）;if(quantity>10){console.log('大数量');}}}else{thrownewError('Nofruit!');}}测试（空）；//错误：没有水果test('apple');//redtest('苹果',20);//red,bigquantity使用这种模式优化上面的代码，可以在无效条件下提前返回：functiontest(fruit,quantity){constredFruits=['apple','strawberry','cherry','cranberries'];if(!fruit)thrownewError('没有水果！');如果(redFruits.includes(fruit)){console.log('red');if(quantity>10){console.log('大数量');}}}可以进一步优化，如果redFruits不包含水果，则提前返回：if(!fruit)thrownewError('没有水果！');如果（！redFruits.includes（水果））返回；console.log('红色');如果（数量>10){console.log('大数量');}}可以看到使用这种模式可以去掉不必要的else语句，让函数更加清晰简洁4.三元运算符对于上面例子中的函数，可以使用JavaScript的三元运算符重构：functionIsRed(someObject){返回类型someObject!=='object'||someObject.color!=='红色'?false:true;}对于上面的三元表达式公式也可以简化为：functionIsRed(someObject){return!(typeofsomeObject!=='object'||someObject.color!=='Red');}对于这个一种if...else块在分别只有一个表达式的情况下，可以使用三元表达式来简化if...else语句。5.Switch...case看下面的代码：functionprintCars(color){if(color==='red'){return['Rcar1','Rcar2'];}elseif(color==='blue'){return['Bcar1','Bcar2'];}elseif(color==='purple'){return['Pcar1','Pcar2'];}return[];}对于这种if的判断条件都是针对一个变量的，可以使用switch...case改写，这样代码看起来更有条理：functionprintCars(color){switch(color){case'red':return['Rcar1','Rcar2'];case'blue':return['Bcar1','Bcar2'];case'purple':return['Pcar1','Pcar2'];默认值：返回[]；}}6、Map/Object对于上面的代码，可以使用对象继续优化：constcarColor={red:['Rcar1','Rcar2'],blue:['Bcar1','Bcar2'],紫色：['Pcar1'，'Pcar2']}；功能printcars（颜色）{返回carColor[颜色]||[];}console.log(printcars());//[]console.log(printcars('red'));//['Rcar1','Rcar2']console.log(printcars('blue'));//['Bcar1','Bcar2']也可以使用Map实现相同的结果：constcarColor=newMap().set('red',['Rcar1','Rcar2']).set('blue',['Bcar1','Bcar2']).set('purple',['Pcar1','Pcar2']);函数printcars（颜色）{返回carColor.get（颜色）||[];}console.log(printcars());//[]console.log(printcars('red'));//['Rcar1','Rcar2']console.log(printcars('blue'));//['Bcar1','Bcar2']7.默认函数参数和解构看下面代码：functioncheck(flower,quantity){if(!flower)return;constnum=数量||1;返回`${num}${flower}`;}check('rose');//1朵玫瑰花('jasmine',2);//2茉莉花可以使用函数默认参数来简化上面的代码：functioncheck(flower,quantity=1){if(!flower)return;返回`${quantity}flowers${flower}`;}check('rose');//1朵玫瑰check('jasmine',2);//2jasminesflower参数是对象怎么办？看下面的代码：functioncheck(flower){if(flower&&flower.name){console.log(flower.name);}else{console.log('未知');}}检查（未定义）；//未知检查({});//unknowncheck({name:'rose',color:'red'});//Rose可以从对象中解构所需的属性：functioncheck({name}={}){console.log(name||'unknown');}check(undefined);//未知检查({});//unknowncheck({name:'rose',color:'red'});//Rose在函数中需要flower对象中的name属性，可以使用{name}解构参数另外，还可以使用{}作为参数的默认值，所以当check(undefined)，即当参数不是对象时，参数默认为空对象，否则会报错，因为undefined中没有name属性。8.逻辑与运算符看下面的代码：if(a<0&&b>100&&c===10){fn()}对于逻辑与运算符，如果左边的条件为假，那么A直接短路，不再继续执行；如果左边的条件为真，则返回右边的计算结果。因此，对于这个if中只有一行表达式的情况，可以使用逻辑AND运算符来简化，其中左边是判断条件，右边是要执行的逻辑：(a<0&&b>100&&c===10)&&fn();参考：https://www.digitalocean.com/community/posts/5-tips-to-write-better-conditionals-in-javascript。https://www.geeksforgeeks.org/tips-for-writing-better-conditionals-in-javascript。
