五大技巧帮你优雅的编写Javascript中的条件语句
作者：互联网
引言
本文翻译自网络上的外文文章，主要觉得很实用就分享给大家，希望对大家有所帮助，原文地址是
scotch/tutorials/5-tips-to-write-better-conditionals-in-javascript#comments
在编写Javascript代码时，常常会有很多条件语句，如果代码足够复杂，则会对代码的可读性和可维护性造成了很大的困扰，下面通过举例来运用5各技巧来更清晰的编写条件语句
Array.includes
顾名思义，Array.includes函数是用来判断数组包含关系的，我们先来看一下我们常常会写到的一段代码：
乍一看，这就是一段很普通的代码，这段代码的意思时如果fruit变量等于apple或者strawberry就会打印red字符串，我们试想以下，假如我想包含更多的水果怎么办，通常我们的做法是继续在代码后面加上我们想扩展的条件，这样就给代码的维护性带来了挑战，当然在这个简单的例子上来说可能并不能体现出来。那么我们如果用Array.includes来重写将会怎样呢？
我们通过数组将条件提取出来，代码看上去更简洁了，而且更容易扩展。
减少嵌套，尽早返回
我们在前面的例子上扩展两个条件
如果没有水果参数，抛出异常如果超过10，则接受并打印水果数量。
我们观察下这段代码
最外层包裹了一个if/else一共嵌套了3层
我个人一般遵循的是一旦条件无效就立即返回的原则，这就不仅仅是javascript了，其他语言也同样适用
这样一来，我们发现减少了条件的嵌套，特别是你的条件较多时，这样做很有帮助，然而我们还可以通过条件反转来进一步减少嵌套，如下：
通过反转条件2，我们的代码没有嵌套语句了。可是我们回过头再思考一下，我们中间多了一个思考的过程，就是条件反转，而且看代码在可读性上貌似有了牺牲，所以有时候我们不必为了刻意的减少嵌套来增加我们思考的负荷。也就是说没必要过度。
函数实用默认参数和解构
我想下面的代码可能看起来很熟悉，我们总是需要检查null/ undefined值并在使用时指定默认值：
实际上我们可以通过给函数的quantity分配默认值来消除多余的判断
我们仍然还可以给fruit赋默认值，比如 function test(fruit='unknown', quantity=1){}；
加入我们的函数参数是一个对象呢？
看上面的例子，我们想要打印水果的名称，或者打印unknown，我们使用了fruit && fruit.name避免了传统的条件检查。
由于我们只需要水果的name属性，我们可以利用对象的解构，直接实用变量name而不是fruit.name；值得注意是的我们我们给参数对象指定了{}，不然这段代码在执行时会报错
test(undefined)- Cannot destructure property name of 'undefined' or 'null'.
这里我们还可以借助第三方库来减少空检查
使用lodash（非常实用的工具类库）使用idx
下面是使用lodash的例子
用Map/对象配置来减少switch
我们来看一个switch的例子，如下
这段代码本身时没有问题的，但是就觉得有点冗长我们可以实用配置对象来简化代码
或者我们也可以使用Map实现相同的结果
虽然上面的代码看上去简化了很多，但也是建立在牺牲可读性的代价上，所以我一般建议尽量实用对象键值对，或者就用switch也未尝不可。
对于上面的例子，我们还可以使用Array.filter来实现相同的效果
实现相同结果的方法总是不止一种，这正体现了编码的乐趣。
妙用Array.every和Array.some
通过较新的js函数来减少代码量，看下面的代码，我们想检查所有水果是否都是红色的：
我们用Array.every来减少代码量
同样的，如果我们想检测是否存在颜色时红色的水果，用Array.some来实现
总结
以上五大技巧是本人在浏览国外技术博客的时候发现的较为实用的编写代码的技巧，希望能够对大家有所帮助，同时也感谢文章的作者，本文翻译并加上自己的部分理解，如有解释的不合理或者有不同意见的地方，可以在评论区留言，共同讨论学习，如果对你有帮助，请麻烦点赞、转发加关注哦，更多有趣实用的技巧会分享给大家！
标签：语句,代码,Javascript,优雅,嵌套,fruit,条件,Array,我们 来源： https://blog.csdn.net/woliuqiangdong/article/details/122782336