使用JavaScript时,我们会遇到很多的条件语句,这里有5个技巧能帮助你写出更好/简洁的条件语句。
- 对多个条件使用Array.includes
- 更少嵌套,尽早return
- 使用默认的函数参数和解构
- 支持Map / Object 语法而不是Switch语句
- 对所有/部分标准使用Array.every和Array.some
- 总结
1. 对多个条件使用Array.includes
先看看下面的例子:
// 条件语句
function test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}
}
乍看上去,上面的例子似乎还不错。然而,如果我们有更多的红色水果,例如 cherry
和 cranberries
呢?我们要用更多的 ||
扩展语句吗?
我们可以用 Array.includes
(Array.includes) 重写上面的条件语句。
function test(fruit) {
// extract conditions to array
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {
console.log('red');
}
}
通过提取 red fruits
为一个数组,使得代码看起来更整洁了。
2.更少嵌套,尽早return
将上面的例子扩展到再包含两个条件语句:
- 如果没提供fruit,抛出错误
- 接收 fruit 的 quantity, 并在大于10时打印
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
// 第一个条件语句: fruit 有值
if (fruit) {
// 第二个条件语句: 是红的
if (redFruits.includes(fruit)) {
console.log('red');
// 第三个条件语句: 质量大
if (quantity > 10) {
console.log('big quantity');
}
}
} else {
throw new Error('No fruit!');
}
}
// test results
test(null); // error: No fruits
test('apple'); // print: red
test('apple', 20); // print: red, big quantity
观察上面的代码,我们有:
- 1个if/else语句,过滤出无效的情况
- 3层if语句嵌套(第1/2/3个条件语句)
我个人通常遵循的规则是遇到无效的情况是尽早return。
/_ return early when invalid conditions found _/
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');
}
}
}
这样做,代码就能减少一层嵌套。这种编码风格很棒,特别是对长长的if语句来说(想象你滑到最底部了才知道还有一个else语句,一点都不cool)。
我们还可以进一步减少if的嵌套,通过转换条件和尽早return。观察下面的第二个条件语句:
/_ return early when invalid conditions found _/
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (!fruit) throw new Error('No fruit!'); // 第一个条件语句: 更早抛出错误
if (!redFruits.includes(fruit)) return; // 第二个条件语句: fruit 不是红的就结束
console.log('red');
// 第三个条件语句: 质量大
if (quantity > 10) {
console.log('big quantity');
}
}
通过转换第二个条件语句的判断,现在代码摆脱了嵌套。当代码有很长的逻辑时,这种技术非常有用,我们希望在条件不满足时停止进一步的处理。
然而,这里没有什么硬性规定。自我评估一下,这个版本(没有嵌套)相比前面那个版本(嵌套第二个条件语句)更好/更可读吗?
对于我个人而言,我会在前面那个版本(嵌套第二个条件语句)时就放过它。这是因为:
- 代码更简短和直观,if嵌套使得代码更清晰
- 转换条件语句可能会导致更多思考过程(增加认知负荷)
因此,通常旨在减少嵌套和尽早Return,但不要矫枉过正。如果你有兴趣深入讨论这个话题,这里有一篇文章和StackOverflow帖子:
- Avoid Else, Return Early by Tim Oxley
- StackOverflow discussion on if/else coding style
3. 使用默认的函数参数和解构
我猜你会觉得下面的代码很眼熟,在使用JavaScript时,我们总是需要检测 null
/undefined
值和分配默认值:
function test(fruit, quantity) {
if (!fruit) return;
const q = quantity || 1; // 如果quantity没有值, 默认分配一个
console.log(`We have ${q} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!
其实,我们可以通过分配默认的函数参数来消除变量 q
。
function test(fruit, quantity = 1) { // 如果quantity没有值, 默认分配一个
if (!fruit) return;
console.log(`We have ${quantity} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!
更简洁和直观了,对吧?请注意,每个参数都可以有自己的默认函数参数。例如,我们可以也给 fruit
分配默认值:
function test(fruit = 'unknow', quantity = 1)
.
那如果 fruit
是一个对象呢?还能分配默认参数吗?
function test(fruit) {
// 如果 fruit name 有值就将其打印出来
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
观察上面的例子,我们希望如果fruit name 有值,就将其打印出来;否则打印 unknow 。可以用默认函数参数和解构来避免条件语句 fruit && fruit.name
的检测。
// 解构 - 仅获取 name 属性
// 分配默认空对象 {}
function test({name} = {}) {
console.log (name || 'unknown');
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
因为我们只需要fruit的name
属性,我们可以使用{name}
解构参数,然后我们可以用 name
作为代码中变量替代fruit.name
.
我们还分配默认空对象 {}
作为默认值。如果我们不这么做,在执行到 test(undefined)
这行时就会报错Cannot destructure property name of 'undefined' or 'null'
.因为undefined没有 name
属性。
如果你不介意使用第三方库,这里还有一些办法免去空值检测:
- 使用 Lodash get 函数
- 使用Facebook开源的 idx 库
这里是一个使用Lodash的示例:
// Include lodash library, you will get _
function test(fruit) {
console.log(__.get(fruit, 'name', 'unknown'); // get property name, if not available, assign default value 'unknown'
}
//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
4. 支持Map / Object 语法而不是Switch语句
看下面的示例,我们想通过color打印fruit:
function test(color) {
// use switch case to find fruits in color
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
//test results
test(null); // []
test('yellow'); // ['banana', 'pineapple']
上面的代码看起来没什么异常,但我觉得它太啰嗦了。使用更清晰的对象语法也能实现同样的效果:
// use object literal to find fruits in color
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function test(color) {
return fruitColor[color] || [];
}
或者,你还可以使用 Map 来实现同样的效果:
// use Map to find fruits in color
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function test(color) {
return fruitColor.get(color) || [];
}
从ES2015之后,Map就是对象类型了,允许你存储键值对。
*应该禁止switch语句的使用吗?*不要因此限制你自己。个人来说,我会尽可能地用对象语法,但我不会定下硬性规定来禁止,只需使用对你的情景有意义的。
TL;DR; 重构语法
对于下面的例子,我们用Array.filter
可以重构代码来实现同样的效果。
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'strawberry', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'pineapple', color: 'yellow' },
{ name: 'grape', color: 'purple' },
{ name: 'plum', color: 'purple' }
];
function test(color) {
// use Array filter to find fruits in color
return fruits.filter(f => f.color == color);
}
总是有更多的办法来实现同样的效果。我们对于同一个例子已经展示4中办法了。代码乐趣多!
5. 对所有/部分标准使用Array.every和Array.some
最后一个技巧是更多地关于利用新(但也不是那么新)的JavaScript数组函数来减少代码行数。观察下面的代码,我们想检测是否所有fruit都是red颜色的:
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
];
function test() {
let isAllRed = true;
// condition: all fruits must be red
for (let f of fruits) {
if (!isAllRed) break;
isAllRed = (f.color == 'red');
}
console.log(isAllRed); // false
}
这代码也太长了!通过使用Array.every
可以减少代码行数:
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
];
function test() {
// condition: short way, all fruits must be red
const isAllRed = fruits.every(f => f.color == 'red');
console.log(isAllRed); // false
}
更清晰了不是吗?如果我们想检测fruit中是否有任何red颜色的,我们可以用一行Array.some
来实现。
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
];
function test() {
// condition: if any fruit is red
const isAnyRed = fruits.some(f => f.color == 'red');
console.log(isAnyRed); // true
}
6. 总结
让我们一起生产更多可读的代码吧。我希望你在这篇文章中有所收获。
以上。享受编程!