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


Posted in Javascript onJune 27, 2019

介绍

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

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

3. 匹配所有条件,使用 Array.every 或者 Array.find

在本例中,我们想要检查每个汽车模型是否都是传入函数的那一个。为了以更加命令式的方式实现,我们会这么做:

const cars = [ 
{ model: 'renault', year: 1956 }, 
{ model: 'peugeot', year: 1968 }, 
{ model: 'ford', year: 1977 } 
]; 
const checkEveryModel = (model) => { 
let isValid = true; 
for (let car of cars) { 
if (!isValid) { 
break; 
} 
isValid = car.model === model; 
} 
return isValid; 
} 
console.log(checkEveryModel('renault')); // 输出 false

如果你更喜欢以命令式的风格行事,上面的代码或许还不错。另一方面,如果你不关心其背后发生了什么,那么你可以重写上面的函数并使用 Array.every 或者 Array.find 来达到相同的结果。

const checkEveryModel = (model) => { 
return cars.every(car => car.model === model); 
} 
console.log(checkEveryModel('renault')); // 输出 false

通过使用 Array.find 并做轻微的调整,我们可以达到相同的结果。两者的表现是一致的,因为两个函数都为数组中的每一个元素执行了回调,并且在找到一个 falsy 项时立即返回 false。

const checkEveryModel = (model) => { 
return cars.find(car => car.model !== model) === undefined; 
} 
console.log(checkEveryModel('renault')); // 输出 false

4. 匹配部分条件,使用 Array.some

Array.every 匹配所有条件,这个方法则可以轻松地检查我们的数组是否包含某一个或某几个元素。为此,我们需要提供一个回调并基于条件返回一个布尔值。

我们可以通过编写一个类似的 for...loop 语句来实现相同的结果,就像之前写的一样。但幸运的是,有很酷的 JavaScript 函数可以来帮助我们完成这件事。

const cars = [ 
{ model: 'renault', year: 1956 }, 
{ model: 'peugeot', year: 1968 }, 
{ model: 'ford', year: 1977 } 
]; 
const checkForAnyModel = (model) => { 
return cars.some(car => car.model === model); 
} 
console.log(checkForAnyModel('renault')); // 输出 true

5. 提前返回而不是使用 if...else 分支

当我还是学生的时候,就有人教过我:一个函数应该只有一个返回语句,并且只从一个地方返回。如果细心处理,这个方法倒也还好。我这么说也就意味着,我们应该意识到它在某些情况下可能会引起条件式嵌套地狱。如果不受控制,多个分支和 if...else 嵌套将会让我们感到很痛苦。

另一方面,如果代码库很大且包含很多行代码,位于深层的一个返回语句可能会带来问题。现在我们都实行关注点分离和 SOLID 原则,因此,代码行过多这种情况挺罕见的。

举例来解释这个问题。假设我们想要显示所给车辆的模型和生产年份:

const checkModel = (car) => { 
let result; // 首先,定义一个 result 变量 
// 检查是否有车 
if(car) { 
// 检查是否有车的模型 
if (car.model) { 
// 检查是否有车的年份 
if(car.year) { 
result = `Car model: ${car.model}; Manufacturing year: ${car.year};`; 
} else { 
result = 'No car year'; 
} 
} else { 
result = 'No car model' 
} 
} else { 
result = 'No car'; 
} 
return result; // 我们的单独的返回语句 
} 
console.log(checkModel()); // 输出 'No car' 
console.log(checkModel({ year: 1988 })); // 输出 'No car model' 
console.log(checkModel({ model: 'ford' })); // 输出 'No car year' 
console.log(checkModel({ model: 'ford', year: 1988 })); // 输出 'Car model: ford; Manufacturing year: 1988;'

正如你所看到的,即使本例的问题很简单,上面的代码也实在太长了。可以想象一下,如果我们有更加复杂的逻辑会发生什么事。大量的 if...else 语句。

我们可以重构上面的函数,分解成多个步骤并稍做改善。例如,使用三元操作符,包括 && 条件式等。不过,这里我直接跳到最后,向你展示借助现代 JavaScript 特性和多个返回语句,代码可以有多简洁。

const checkModel = ({model, year} = {}) => { 
if(!model && !year) return 'No car'; 
if(!model) return 'No car model'; 
if(!year) return 'No car year'; 
// 这里可以任意操作模型或年份 
// 确保它们存在 
// 无需更多检查 
// doSomething(model); 
// doSomethingElse(year); 
return `Car model: ${model}; Manufacturing year: ${year};`; 
} 
console.log(checkModel()); // 输出 'No car' 
console.log(checkModel({ year: 1988 })); // 输出 'No car model' 
console.log(checkModel({ model: 'ford' })); // 输出 'No car year' 
console.log(checkModel({ model: 'ford', year: 1988 })); // 输出 'Car model: ford; Manufacturing year: 1988;'

在重构版本中,我们包含了解构和默认参数。默认参数确保我们在传入 undefined 时有可用于解构的值。注意,如果传入 null ,函数将会抛出错误。这也是之前那个方法的优点所在,因为那个方法在传入 null 的时候会输出 'No car'。

对象解构确保函数只取所需。例如,如果我们在给定车辆对象中包含额外属性,则该属性在我们的函数中是无法获取的。

根据偏好,开发者会选择其中一种方式。实践中,编写的代码通常介于两者之间。很多人觉得 if...else 语句更容易理解,并且有助于他们更为轻松地遵循程序流程。

6. 使用索引或者映射,而不是 switch 语句

假设我们想要基于给定的国家获取汽车模型。

const getCarsByState = (state) => { 
switch (state) { 
case 'usa': 
return ['Ford', 'Dodge']; 
case 'france': 
return ['Renault', 'Peugeot']; 
case 'italy': 
return ['Fiat']; 
default: 
return []; 
} 
} 
console.log(getCarsByState()); // 输出 [] 
console.log(getCarsByState('usa')); // 输出 ['Ford', 'Dodge'] 
console.log(getCarsByState('italy')); // 输出 ['Fiat']

上诉代码可以重构,完全去除 switch 语句。

const cars = new Map() 
.set('usa', ['Ford', 'Dodge']) 
.set('france', ['Renault', 'Peugeot']) 
.set('italy', ['Fiat']); 
const getCarsByState = (state) => { 
return cars.get(state) || []; 
} 
console.log(getCarsByState()); // 输出 [] 
console.log(getCarsByState('usa')); //输出 ['Ford', 'Dodge'] 
console.log(getCarsByState('italy')); // 输出 ['Fiat']

或者,我们还可以为包含可用汽车列表的每个国家创建一个类,并在需要的时候使用。不过这个就是题外话了,本文的主题是关于条件句的。更恰当的修改是使用对象字面量。

const carState = { 
usa: ['Ford', 'Dodge'], 
france: ['Renault', 'Peugeot'], 
italy: ['Fiat'] 
}; 
const getCarsByState = (state) => { 
return carState[state] || []; 
} 
console.log(getCarsByState()); // 输出 [] 
console.log(getCarsByState('usa')); // 输出 ['Ford', 'Dodge'] 
console.log(getCarsByState('france')); // 输出 ['Renault', 'Peugeot']

7. 使用自判断链接和空合并

到了这一小节,我终于可以说“最后”了。在我看来,这两个功能对于 JavaScript 语言来说是非常有用的。作为一个来自 C# 世界的人,可以说我经常使用它们。

在写这篇文章的时候,这些还没有得到完全的支持。因此,对于以这种方式编写的代码,你需要使用 Babel 进行编译。你可以在自判断链接这里以及在空合并这里查阅。

自判断链接允许我们在没有显式检查中间节点是否存在的时候处理树形结构,空合并可以确保节点不存在时会有一个默认值,配合自判断链接使用会有不错的效果。

让我们用一些例子来支撑上面的结论。一开始,我们还是用以前的老方法:

const car = { 
model: 'Fiesta', 
manufacturer: { 
name: 'Ford', 
address: { 
street: 'Some Street Name', 
number: '5555', 
state: 'USA' 
} 
} 
} 
// 获取汽车模型 
const model = car && car.model || 'default model'; 
// 获取厂商地址 
const street = car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.street || 'default street'; 
// 请求一个不存在的属性 
const phoneNumber = car && car.manufacturer && car.manufacturer.address && car.manufacturer.phoneNumber; 
console.log(model) // 输出 'Fiesta' 
console.log(street) // 输出 'Some Street Name' 
console.log(phoneNumber) // 输出 undefined

因此,如果我们想要知道厂商是否来自 USA 并将结果打印,那么代码是这样的:

const checkCarManufacturerState = () => { 
if(car && car.manufacturer && car.manufacturer.address && car.manufacturer.address.state === 'USA') { 
console.log('Is from USA'); 
} 
} 
checkCarManufacturerState() // 输出 'Is from USA'

我无需再赘述如果对象结构更加复杂的话,代码会多么混乱了。许多库,例如 lodash,有自己的函数作为替代方案。不过这不是我们想要的,我们想要的是在原生 js 中也能做同样的事。我们来看一下新的方法:

// 获取汽车模型 
const model = car?.model ?? 'default model'; 
// 获取厂商地址 
const street = car?.manufacturer?.address?.street ?? 'default street'; 
// 检查汽车厂商是否来自 USA 
const checkCarManufacturerState = () => { 
if(car?.manufacturer?.address?.state === 'USA') { 
console.log('Is from USA'); 
} 
}

这看起来更加漂亮和简洁,对我来说,非常符合逻辑。如果你想知道为什么应该使用 ?? 而不是 || ,只需想一想什么值可以当做 true 或者 false,你将可能有意想不到的输出。

顺便说句题外话。自判断链接同样支持 DOM API,这非常酷,意味着你可以这么做:

const value = document.querySelector('input#user-name')?.value;

结论

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
原生js实现抽奖小游戏
Jun 27 #Javascript
JavaScript实现图片放大镜效果
Jun 27 #Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 #Javascript
微信小程序自定义组件实现环形进度条
Nov 17 #Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 #Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 #Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
Python常用模块用法分析
2014/09/08 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
学校志愿者活动总结
2014/06/27 职场文书
教师节随笔
2015/08/15 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫