function test(fruit, quantity) {
if (!fruit) return;
// 如果 quantity 参数没有传入,设置默认值为 1
const q = quantity || 1;
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 参数没有传入,设置默认值为 1
if (!fruit) return;
console.log(`We have ${quantity} ${fruit}!`);
}
//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!
4 .倾向于对象遍历而不是Switch语句
让我们看下面这个例子,我们想根据 color 打印出水果:
function test(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']
5条可以尽可能的让你写出更好/干净的条件语句的建议。
1. 多重判断时使用 Array.includes
让我们看一下下面这个例子:
第一眼,上面这个例子看起来没问题。如果我们有更多名字叫 cherry 和 cranberries 的红色水果呢?我们准备用更多的 || 来拓展条件语句吗?
我们可以用 Array.includes (Array.includes)重写条件语句。
我们把红色的水果(red fruits)这一判断条件提取到一个数组。这样一来,代码看起来更整洁。
2. 更少的嵌套,尽早 Return
让我们拓展上一个例子让它包含两个条件。
我个人遵循的规则一般是在发现无效条件时,尽早Return。
这样一来,我们少了一层嵌套语句。这种编码风格非常好,尤其是当你有很长的if语句的时候(想象你需要滚动到最底层才知道还有else语句,这并不酷)
我们可以通过 倒置判断条件 & 尽早return 进一步减少if嵌套。看下面我们是怎么处理判断 条件2 的:
通过倒置判断条件2,我们的代码避免了嵌套语句。这个技巧在我们需要进行很长的逻辑判断时是非常有用的,特别是我们希望能够在条件不满足时能够停止下来进行处理。
而且这么做并不困难。问问自己,这个版本(没有嵌套)是不是比之前的(两层条件嵌套)更好,可读性更高?
3. 使用默认参数和解构
我猜下面的代码你可能会熟悉,在JavaScript中我们总是需要检查 null / undefined的值和指定默认值:
实际上,我们可以通过声明 默认函数参数 来消除变量 q。
4 .倾向于对象遍历而不是Switch语句
让我们看下面这个例子,我们想根据 color 打印出水果:
上面的代码看起来没有错误,但是我找到了一些累赘。用对象遍历实现相同的结果,语法看起来更简洁:
或者你也可以使用 Map实现相同的结果:
Map是一种在 ES2015 规范之后实现的对象类型,允许你存储 key 和 value 的值。
但我们是否应当禁止switch语句的使用呢?答案是不要限制你自己。从个人来说,我会尽可能的使用对象遍历,但我并不严格遵守它,而是使用对当前的场景更有意义的方式。
重构语法
5. 对 所有/部分 判断使用Array.every & Array.some
这最后一个建议更多是关于利用 JavaScript Array 的内置方法来减少代码行数。看下面的代码,我们想要检查是否所有水果都是红色:
代码那么长!我们可以通过 Array.every减少代码行数:
现在更简洁了,不是吗?相同的方式,如果我们想测试是否存在红色的水果,我们可以使用 Array.some 一行代码实现。