JavaScript 条件语句优化小技巧

,大家好，我是 CUGGZ。,在日常的开发中，我们经常会编写一些条件语句，过多的 ​​if...else​​会导致代码难以理解和维护，今天来分享几个优化条件语句的小技巧！,,来看下面的代码：,在test​方法中包含一个 if​ 语句，用来判断传入的参数animal​是不是lion​或者dog​。这么写从语法上是没问题的，但是如果 if​ 的判断条件中不只有两个动物，而是有四只动物。如果继续使用 || 与运算符来写的话，代码就会很难维护并且看起来非常不优雅：,对于这种需要对同一个变量进行多次判断的条件语句，可以使用数组的​​includes()​​​方法来优化，该方法可以用于确定数组中是否存在指定元素，如果存在指定的元素，就会返回 ​​true​​​，如果不存在就会返回 ​​false​​​。使用 ​​includes()​​ 来修改写上面的代码：,这样代码看起来就简洁了很多，并且如果想继续增加其他的动物，只需在数组中继续增加元素即可。,来看下面的代码：,JavaScript 中的数组提供了every()​方法，该方法用于检查数组中所有元素是否满足给定条件。当每个数组元素都满足给定条件时会返回 true​，否则会返回false。可以使用该方法来优化上面的代码：,在 JavaScript 中，尽早 return​ 是一种将函数体减少else语句的简单方法。来看下面的代码：,来使用这种模式来优化上面的代码，可以在无效条件时尽早返回：,可以进一步优化，如果 redFruits​ 中不包含fruit，就提前返回：,可以看到，使用这种模式可以消除不必要的else语句，使得函数更加清晰和简洁。,对于上面例子中的函数，可以使用 JavaScript 的三元运算符来重构：,对于上面的三元表达式，还可以进行简化：,对于这种if...else​块中都分别只有一个表达式的情况，就可以使用三元表达式来简化if...else语句。,来看下面的代码：,对于这种if​的判断条件中都是针对一个变量进行判断的情况，可以使用switch...case来改写，这样代码看起来更有调理：,对于上面的代码，可以使用对象来继续优化：,也可以使用 Map 来实现相同的结果：,来看下面的代码：,可以使用函数默认参数来简化上面的代码：,那如果flower参数是一个对象怎么办呢？来看下面的代码：,可以从对象中解构需要的属性：,在函数中需要flower​对象中的name​属性，可以使用{name}​来解构该参数。除此之外，还可以用{}​来作为参数的默认值，这样在check(undefined)​时，也就是参数不是对象时，参数默认为一个空对象，否则就会报错，因为undefined​中没有name属性。,来看下面的代码：,对于逻辑与运算符，其左侧的条件如果为false​，就会直接发生短路，不再继续往后执行；如果左侧的条件为true​，就会返回其右侧的计算结果。所以，对于这种 if 中只有一行表达式的情况，可以使用逻辑与运算符来简化，其中左侧为判断条件，右侧是要执行的逻辑：,参考：