来源| http://www.fly63.com/article/detial/1192在使用JavaScript时，我们经常要编写许多条件语句。 这里有五个技巧可以帮助你写出更干净漂亮的条件语句。 1.使用Array.includes解决多个条件。举个栗子的例子://条件语句函数test(fruit){ if(fruit = = ' apple ' | | fruit = = '草莓'){ console . log(' red ')；}}乍一看，这样写好像问题不大。 然而，如果我们想搭配更多的红色水果，比如“樱桃”和“蔓越莓”呢？我们必须用更多的||，来扩展这个声明吗？我们可以用Array.includes重写上面的条件句 test(fruit){//将条件提取到数组中。构造= ['苹果'，'草莓'，'樱桃'，'小红莓']；if(red fruits . includes(fruit)){ console . log(' red ')；}}我们将所有的红果(条件)提取到一个数组中，这使得我们的代码看起来更干净。 2.少写嵌套，尽早返回。让我们给前面的例子增加两个条件:如果没有提供水果，抛出一个错误。 如果水果的数量大于10，则将其打印出来。 functiontest(水果，数量){ construd fruits =['苹果'，'草莓'，'樱桃'，'小红莓']；//条件一:水果必须有值if(水果){//条件二:红色if (redfruits.includes(水果)){ console . log(' red ')；//条件三:必须有大量if(数量>:10) {console.log('大数量')；} }}else{thrownewError('没有果实！');} }//测试结果测试(null)；//错误:没有fruits test(' apple ')；//print: redtest('苹果'，20)；//Print:红色，量大让我们仔细看看上面的代码。我们有:1个if/else语句来挑选无效的条件。3层if语句嵌套(条件1，2 & amp；3)个人而言，我遵循的一个通用规则是，当我发现无效条件时，尽快返回。 /_ Return _/发现无效条件时尽快进行函数测试(水果，数量){ConstructResources = ['苹果'，'草莓'，'樱桃'，'小红莓']；//条件1:抛出错误if(！水果)thrownewError('没有水果！');//条件二:必须是红色if(red fruits . includes(fruit)){ console . log(' red ')；//条件三:必须有大量if(数量>:10) {console.log('大数量')；}}}结果我们少写了一层嵌套。 这是一种很好的代码风格，尤其是当if语句很长时(想象一下，你必须滚动到底部才能知道那里还有另一个else语句，是不是有点不舒服) 如果我们颠倒条件，我们可以进一步减少嵌套层次。 观察下面的条件2语句，看看是怎么做的:/_当发现无效条件时，尽快返回_/function test(水果，数量){constraints = ['苹果'，'草莓'，'樱桃'，'小红莓']；如果(！水果)thrownewError('没有水果！');//条件1:抛出错误if(！redFruits.includes(水果))返回；//条件二:水果不红时，直接返回console . log(' red ')；//条件三:必须有大量if(数量>:10) {console.log('大数量')；}}通过颠倒条件2的条件，现在我们的代码不再嵌套。 当我们的代码的逻辑链很长的时候，这个技术会很有用，我们希望在不满足某个条件的情况下，不执行后处理。 然而，没有硬性规定要求你这样做。 这取决于你自己。对你来说，这个版本的代码(没有嵌套)能比之前的版本(在条件2中有嵌套)更好更易读吗？如果我是你，我会选择之前的版本(条件2有嵌套) 原因是这样的代码简短明了，一个嵌套的if让结构更清晰。 条件逆转会导致更多的思考过程(增加认知负担) 所以，永远追求少筑巢早归，但不要过度。 如果你有兴趣，这里有一篇关于这个问题的文章和关于StackOverflow的讨论:避免Else，提早返回作者Tim Oxley stack overflow关于if/else编码风格3，使用函数默认参数和解构的讨论我猜你可能对下面的代码比较熟悉。在JavaScript中，我们经常需要检查null/undefined并给出默认值:function test(水果，数量){if(！果)回归；constq =数量| | 1；//如果没有提供quantity，默认值为1console.log(`我们有$ {q} $ {fruit}！`);}//测试结果Test('香蕉')；//我们有1个香蕉！测试('苹果'，2)；//我们有2个苹果！其实我们可以通过函数的默认参数去掉变量Q。 函数Test (fruit，quantity = 1){//如果没有提供quantity，则默认值为1if(！果)回归；console.log(`我们有${quantity}${fruit}！`);}//测试结果Test('香蕉')；//我们有1个香蕉！测试('苹果'，2)；//我们有2个苹果！是不是更简单直接？请注意，所有函数参数都可以有默认值。 例如，我们也可以给fruit: function test一个默认值(fruit =' unknown '，quantity = 1) 如果水果是一个物体呢？我们还能使用默认参数吗？test(fruit){//如果有值，打印出If(fruit & amp；水果.名称){console.log(水果.名称)；} else { console . log(' unknown ')；} }//测试结果测试(未定义)；//unknown test({ })；// unknowntest({name:'apple '，color:' red ' })；//苹果观察上面的例子。当水果名称属性存在时，我们想打印它；否则，我们将打印“『未知』” 我们可以避免写水果& amp；水果的状况 //解构——只获取名称属性。//默认参数为空对象{ } function test({ name } = { }){ console . log(name | | ' unknown ')；}//测试结果Test(未定义)；//unknown test({ })；// unknowntest({name:'apple '，color:' red ' })；// apple既然只想要水果的name属性，那么可以用{name}来解构，然后在代码中用name变量代替fruit.name。 我们还使用{}作为它的默认值。 如果我们不这样做，当执行test(undefined)时，你会得到一个错误不能de结构属性名为' undefined '或' null '。因为undefined上没有name属性。 (译者注:这里不准确。其实解构只适用于对象，并不是因为undefined上没有name属性(空对象上也没有) 参考解构作业-MDN)如果你不介意使用第三方库，有几种方法可以帮助减少空值检查:使用Lodash get函数使用脸书的开源idx库(带Babeljs)。下面是一个使用Lodash的例子://Use _ method function test(fruit){ console . log(_。lodash库提供的get(水果，'名字'，'未知')；//获取属性名的值，如果没有，设置为默认值unknown}//测试结果Test(未定义)；//unknown test({ })；// unknowntest({name:'apple '，color:' red ' })；//苹果你可以在这里运行演示代码 另外，如果你更喜欢函数式编程(FP)，可以选择使用Lodash FP——Lodash的函数版本(方法名改为get或get or) 4.与switch相比，Map/Object可能是更好的选择。让我们看看下面的例子。我们要把各种水果按颜色打印出来:功能测试(颜色){/用switch case找到对应颜色开关的水果(颜色){case' red': return ['苹果'，'草莓']；case'yellow':return['banana '，'菠萝']；case'purple':return['葡萄'，'李子']；默认值:return[]；} }//测试结果测试(null)；//[]测试('黄色')；//['banana '，' pineapp']上面的代码看起来没有错，但是个人觉得看起来很冗长。 用object literal也能达到同样的效果，语法更简洁://用object literal查找对应颜色的水果= {红色:['苹果'，'草莓']，黄色:['香蕉'，'菠萝']，紫色:['葡萄'，'李子']。function test(color){ return fruit color[color]| |[]；}或者，也可以用Map达到同样的效果://用Map找到对应颜色的水果= new map()。set('红色'，['苹果'，'草莓'])。set('黄色'，['香蕉'，'菠萝'])。set function test(color){ return fruit color . get(color)| |[]；}Map是ES2015中引入的新对象类型，允许您存储键值对。 这是否意味着我们应该禁止使用switch语句？不要限制自己。 我将尽可能使用对象文字，但这并不意味着我不使用开关，这取决于场景。 Todd Motto有一篇文章深入研究了switch语句和对象文字。你可能想看看。 懒惰版本:重构语法。有了上面的例子，其实我们可以重构我们的代码，使用Array.filter达到同样的效果。 constfruits = [{name:'苹果'，color:'红色' }，{name:'草莓'，color:'红色' }，{name:'香蕉'，color:'黄色' }，{name:'菠萝'，color:'黄色' }，{name:'葡萄'，color:'紫色' }，{name:'李子'，color:'紫色' }]；test(color){//使用数组过滤器查找对应的颜色fruit return fruits . filter(f = >:f . color = = color)；}处理问题的方法从来都不是只有一种 对于这个例子，我们展示了四种实现方法。 编码很好玩！5.使用Array.every和Array.some求解一致/部分满足的条件。最后一个技巧更多的是关于使用新的(不是很新的)JavaScript数组函数来减少代码行数。 观察下面的代码，我们要检查是否所有的水果都是红色的:const fruits = [{name:' apple '，color:' red'}，{name:' banana '，color:' yellow'}，{name:' grape '，color:' purple ' }]；function test(){ letis allred = true；//条件:对于(letfoffruits) {if(！isAllRed)break；isAllRed =(f . color = = ' red ')；} console . log(isAllRed)；// false}这个代码太长了！我们可以把代码constfruits = [{name:' apple '，color:' red'}，{name:' banana '，color:' yellow'}，{name:' grape '，color:' purple'}]用Array.everyFunctiontest(){// Condition:(短格式)所有水果必须是红色constitusallred = fruits . every(f = >；f . color = = ' red ')；console . log(is allred)；// false}清楚多了吧？同样，如果我们想检查是否至少有一个水果是红色的，我们可以使用Array.some只用一行代码来实现。 constfruits = [{name:'苹果'，color:'红色' }，{name:'香蕉'，color:'黄色' }，{name:'葡萄'，color:'紫色' }]；Functiontest(){//条件:至少有一个水果是红色的constitsanyred = fruits . some(f = >；f . color = = ' red ')；console . log(isAnyRed)；// true}总结让我们一起编写更具可读性的代码。 希望这篇文章能给你带来一点帮助。 就是这样~快乐编码！