在日常的开发中,我们经常会编写一些条件语句,过多的 if...else
会导致代码难以理解和维护,今天来分享几个优化条件语句的小技巧!
来看下面的代码:
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;
}
这样代码看起来就简洁了很多,并且如果想继续增加其他的动物,只需在数组中继续增加元素即可。
来看下面的代码:
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);
在 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
语句,使得函数更加清晰和简洁。
对于上面例子中的函数,可以使用 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
语句。
来看下面的代码:
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 [];
}
}
对于上面的代码,可以使用对象来继续优化:
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']
来看下面的代码:
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
属性。
来看下面的代码:
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
Copyright© 2013-2020
All Rights Reserved 京ICP备2023019179号-8