介绍
如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态。我认为我们应当尽可能地遵循这些原则。
正如我在另一篇文章 JavaScript 整洁代码的最佳实践里提到的,你写的代码不单单是给机器看的,还是给“未来的自己”以及“其他人”看的。
从另一方面来说,由于各式各样的原因,可能我们的代码最终还是会有条件式。也许是修复 bug 的时间很紧,也许是不使用条件语句会对我们的代码库造成大的改动,等等。本文将会解决这些问题,同时帮助你组织所用的条件语句。
技巧
以下是关于如何构造 if...else 语句以及如何用更少的代码实现更多功能的技巧。阅读愉快!
1. 要事第一。小细节,但很重要
不要使用否定条件式(这可能会让人感到疑惑)。同时,使用条件式简写来表示 boolean 值。这个无须再强调了,尤其是否定条件式,这不符合正常的思维方式。
不好的:
const isEmailNotVerified = (email) => { // 实现 } if (!isEmailNotVerified(email)) { // 做一些事... } if (isVerified === true) { // 做一些事... }
好的:
const isEmailVerified = (email) => { // 实现 } if (isEmailVerified(email)) { // 做一些事... } if (isVerified) { // 做一些事... }
现在,理清了上面的事情后,我们就可以开始了。
2. 对于多个条件,使用 Array.includes
假设我们想要在函数中检查汽车模型是 renault 还是 peugeot。那么代码可能是这样的:
const checkCarModel = (model) => { if(model === 'renault' || model === 'peugeot') { console.log('model valid'); } } checkCarModel('renault'); // 输出 'model valid'
考虑到我们只有两个模型,这么做似乎也还能接受,但如果我们还想要检查另一个或者是几个模型呢?如果我们增加更多 or 语句,那么代码将变得难以维护,且不够整洁。为了让它更加简洁,我们可以像这样重写函数:
const checkCarModel = (model) => { if(['peugeot', 'renault'].includes(model)) { console.log('model valid'); } } checkCarModel('renault'); // 输出 'model valid'
上面的代码看起来已经很漂亮了。为了更进一步改善它,我们可以创建一个变量来存放汽车模型:
const checkCarModel = (model) => { const models = ['peugeot', 'renault']; if(models.includes(model)) { console.log('model valid'); } } checkCarModel('renault'); // 输出 'model valid'
现在,如果我们想要检查更多模型,只需要添加一个新的数组元素即可。此外,如果它很重要的话,我们还可以将 models 变量定义在函数作用域外,并在需要的地方重用。这种方式可以让我们集中管理,并使维护变得轻而易举,因为我们只需在代码中更改一个位置。
新闻热点
疑难解答
图片精选