首页 > 语言 > JavaScript > 正文

编写更好的JavaScript条件式和匹配条件的技巧(小结)

2024-05-06 15:37:20
字体:
来源:转载
供稿:网友

介绍

如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态。我认为我们应当尽可能地遵循这些原则。

正如我在另一篇文章 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 变量定义在函数作用域外,并在需要的地方重用。这种方式可以让我们集中管理,并使维护变得轻而易举,因为我们只需在代码中更改一个位置。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选