内容摘要：大家好，我是 CUGGZ。在日常的开发中，我们经常会编写一些条件语句，过多的​​if...else​​会导致代码难以理解和维护，今天来分享几个优化条件语句的小技巧！1、Array.includes来看

大家好，条件我是语句优化 CUGGZ。

在日常的小技开发中，我们经常会编写一些条件语句，条件过多的语句优化 ​​if...else​​会导致代码难以理解和维护，今天来分享几个优化条件语句的小技小技巧！

1、条件Array.includes

来看下面的语句优化代码：

function test(animal) {

if (animal == lion || animal == dog) {

return animal;

}

return ;

}

test(dog);

在test​方法中包含一个 if​ 语句，用来判断传入的小技参数animal​是不是lion​或者dog​。这么写从语法上是条件没问题的，但是语句优化如果 if​ 的判断条件中不只有两个动物，而是小技有四只动物。如果继续使用 || 与运算符来写的条件话，代码就会很难维护并且看起来非常不优雅：

if (animal == lion || animal == dog || animal == cow || animal == cat) {

return animal;

}

对于这种需要对同一个变量进行多次判断的语句优化条件语句，可以使用数组的小技​​includes()​​​方法来优化，该方法可以用于确定数组中是否存在指定元素，如果存在指定的站群服务器元素，就会返回 ​​true​​​，如果不存在就会返回 ​​false​​​。使用 ​​includes()​​ 来修改写上面的代码：

if ([dog, cat, cow, lion].includes(animal)) {

return animal;

}

这样代码看起来就简洁了很多，并且如果想继续增加其他的动物，只需在数组中继续增加元素即可。

2、Array.every

来看下面的代码：

const cars = [

{ name: car1, color: red },

{ name: car2, color: blue },

{ name: car3, color: purple }

];

function test(cars) {

let isAllblue = true;

for (let c of cars) {

if (!isAllblue) break;

isAllblue = (c.color == blue);

}

return isAllblue;

}

test(cars);

JavaScript 中的数组提供了every()​方法，该方法用于检查数组中所有元素是否满足给定条件。当每个数组元素都满足给定条件时会返回 true​，否则会返回false。可以使用该方法来优化上面的代码：

const cars = [

{ name: car1, color: red },

{ name: car2, color: blue },

{ name: car3, color: purple }

];

function test(cars) {

return cars.every(c => c.color == blue);

}

test(cars);

3、尽早 return

在 JavaScript 中，尽早 return​ 是一种将函数体减少else语句的简单方法。来看下面的代码：

function test(fruit, quantity) {

const redFruits = [apple, strawberry, cherry, cranberries];

if (fruit) {

if (redFruits.includes(fruit)) {

console.log(red);

if (quantity > 10) {

console.log(big quantity);

}

}

} else {

throw new Error(No fruit!);

}

}

test(null); // error: No fruits

test(apple); // red

test(apple, 20); // red, big quantity

来使用这种模式来优化上面的代码，可以在无效条件时尽早返回：

function test(fruit, quantity) {

const redFruits = [apple, strawberry, cherry, cranberries];

if (!fruit) throw new Error(No fruit!);

if (redFruits.includes(fruit)) {

console.log(red);

if (quantity > 10) {

console.log(big quantity);

}

}

}

可以进一步优化，如果 redFruits​ 中不包含fruit，就提前返回：

function test(fruit, quantity) {

const redFruits = [apple, strawberry, cherry, cranberries];

if (!fruit) throw new Error(No fruit!);

if (!redFruits.includes(fruit)) return;

console.log(red);

if (quantity > 10) {

console.log(big quantity);

}

}

可以看到，使用这种模式可以消除不必要的else语句，使得函数更加清晰和简洁。

4、三元运算符

对于上面例子中的网站模板函数，可以使用 JavaScript 的三元运算符来重构：

function IsRed(someObject) {

return typeof someObject !== object || someObject.color !== Red ? false : true;

}

对于上面的三元表达式，还可以进行简化：

function IsRed(someObject) {

return !(typeof someObject !== object || someObject.color !== Red);

}

对于这种if...else​块中都分别只有一个表达式的情况，就可以使用三元表达式来简化if...else语句。

5、switch...case

来看下面的代码：

function printCars(color) {

if (color === red) {

return [Rcar1, Rcar2];

}

else if (color === blue) {

return [Bcar1, Bcar2];

}

else if (color === purple) {

return [Pcar1, Pcar2];

}

return [];

}

对于这种if​的判断条件中都是针对一个变量进行判断的情况，可以使用switch...case来改写，这样代码看起来更有调理：

function printCars(color) {

switch (color) {

case red:

return [Rcar1, Rcar2];

case blue:

return [Bcar1, Bcar2];

case purple:

return [Pcar1, Pcar2];

default:

return [];

}

}

6、Map/Object

对于上面的代码，可以使用对象来继续优化：

const carColor = {

red: [Rcar1, Rcar2],

blue: [Bcar1, Bcar2],

purple: [Pcar1, Pcar2]

};

function printcars(color) {

return carColor[color] || [];

}

console.log(printcars()); // []

console.log(printcars(red)); // [Rcar1，Rcar2]

console.log(printcars(blue)); // [Bcar1，Bcar2]

也可以使用 Map 来实现相同的结果：

const carColor = new Map()

.set(red, [Rcar1, Rcar2])

.set(blue, [Bcar1, Bcar2])

.set(purple, [Pcar1, Pcar2]);

function printcars(color) {

return carColor.get(color) || [];

}

console.log(printcars()); // []

console.log(printcars(red)); // [Rcar1，Rcar2]

console.log(printcars(blue)); // [Bcar1，Bcar2]

7、默认函数参数和解构

来看下面的代码：

function check(flower, quantity) {

if (!flower) return;

const num = quantity || 1;

return `${ num}朵${ flower}`;

}

check(玫瑰); // 1朵玫瑰

check(茉莉, 2); // 2朵茉莉

可以使用函数默认参数来简化上面的代码：

function check(flower, quantity = 1) {

if (!flower) return;

return `${ quantity}朵${ flower}`;

}

check(玫瑰); // 1朵玫瑰

check(茉莉, 2); // 2朵茉莉

那如果flower参数是一个对象怎么办呢？来看下面的代码：

function check(flower) {

if (flower && flower.name) {

console.log(flower.name);

} else {

console.log(unknown);

}

}

check(undefined); // unknown

check({ }); // unknown

check({ name: 玫瑰, color: red }); // 玫瑰

可以从对象中解构需要的属性：

function check({ name} = { }) {

console.log (name || unknown);

}

check(undefined); // unknown

check({ }); // unknown

check({ name: 玫瑰, color: red }); // 玫瑰

在函数中需要flower​对象中的name​属性，可以使用{ name}​来解构该参数。除此之外，还可以用{ }​来作为参数的服务器租用默认值，这样在check(undefined)​时，也就是参数不是对象时，参数默认为一个空对象，否则就会报错，因为undefined​中没有name属性。

8、逻辑与运算符

来看下面的代码：

if(a < 0 && b > 100 && c === 10) {

fn()

}

对于逻辑与运算符，其左侧的条件如果为false​，就会直接发生短路，不再继续往后执行；如果左侧的条件为true​，就会返回其右侧的计算结果。所以，对于这种 if 中只有一行表达式的情况，可以使用逻辑与运算符来简化，其中左侧为判断条件，右侧是要执行的逻辑：

(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。