JS条件判断技巧（一）

提前返回，少用if...else

《if.else 是编程语言的精髓。—— 鲁迅》 但过多的嵌套还是挺让人沮丧的。这是一个非常典型的条件嵌套：

函数func(){ var 结果； if( 条件A ) { if( 条件B ) { 结果='成功'; } else { 结果='错误1'; } } else { result='Error2' } return result;}这种嵌入嵌套的特点是else中的代码块很小，但是必须要做的分支语句导致多层嵌套。开动你的大脑，怎样才能简化它呢？在if中做非判断——条件反转，通过guard语句提前返回else分支。

function func(){ if( !conditionA ) { return 'Error2' } if( !conditionB ) { return 'Error1' } return 'Success';}

forEach优化

多条件，用Array.includes

再比如某个页面需要验证输入类型合法吗？我收到一位先生曾经写过这篇文章。

const init(type) { if( type==='研讨会' || type==='面试' ) { console.log('valid'); } . console.error('invalide');} if 合法类型只有两种，实际上代码没有任何问题。只是一般业务以后很容易扩展。如果以后合法类型增加到10种，上面的代码就会是一长串if判断。这种代码极不可读。我们不妨换个思路，将非法类型存储在数组中，用Array.includes来帮你完成冗长的判断。每次添加新类型时，只需在数组后面附加一个新字符串即可。

const init(type) { const invalidArray=['研讨会', '面试'] if( invalidArray.includes(type) ) { console.log('valid'); } } .}

使用object索引

类似的情况也发生在三元表达式： 中

const dateFormat=(dateTime)={ const format=this.$i18n.locale==='en' ? 'mmm d, yyyy' : 'yyyy m 月d 日'; return DateFormat(dateTime, format);}us 现阶段多语言仅支持en 和zh。上面的代码自然是没有问题的，但是不保证有一天会支持日语——ja。这个时候，写出下面的代码就很搞笑了：

const 格式=this.$i18n.locale==='en' ？ 'mmm d, yyyy' : (this.$i18n.locale==='zh' ? 'yyyyyear m 月d 日' : 'yyyy/m /d');更合适的写法是使用对象键索引，这样当语言业务扩展时，只需要在localeFormats后面追加新的格式即可。

const localeFormats={ en: 'mmm d, yyyy', zh: 'yyyyyyyyyyyyyyyyyyyyy/m/d',}const format=localeFormats[this.$i18n.locale];

尽量少用swith

长Switch也极其丑陋。

导出函数（类型）{ switch（类型）{ case 'Onion': return func1(); case '大蒜': return func2(); case 'Ginger': return func3(); default: return ()={console.error('ERROR')};我记得OOP设计模式里有提到：尽量使用多态和继承，而不是Switch结构。在JS中你不需要考虑这个。使用Object 或Map 索引代替Switch 也很棒！

const arr=[ ['洋葱', func1], ['大蒜', func2], ['姜', func3],] const def=()={console.error('ERROR')}const Vegetable=new Map (arr);export function(type) { return ( Vegetable.get(type) || def ).call(null);}

Optional Chaining

可选链接（Optional Chaining，以下简称OC）是我强烈推荐的语法糖。我写了一个issue 《Javascript Optional Chaining》来详细介绍它的用法。有兴趣的朋友可以看一下，点击这里。例如，我们想要获取地址中的街道信息，但我们不确定该地址本身是否存在。因此，我们只能在获取街道之前判断地址的合法性。一般我们会这样写：

if(address) { var street=address.street;} 但是如果还有一层怎么办，从basicInfo.address.street 中找到它怎么样？

if( basicInfo ) { var 地址=basicInfo.address; if( 地址) { var 街道=地址. 街道；我已经觉得上面的代码很丑了，而且我无法忍受更多的层。不过不用担心，有了OC一切都会解决。 （虽然OC还处于ECMAScript stage 2，但是你可以使用babel来尝试一下；babel会自动将下面的源代码转义为上面的形式）

var street=basicInfo?address?street;

写在最后

我自学了几种编程语言，感觉这些技巧在各种语言中都差不多；实现上可能略有不同，但基本思想是相同的—— 减少了大括号的数量！在面试过程中，我经常看到人们编写非常冗长的代码，并且有很多嵌套。经过我提醒，得到的回复通常是：“我从来没有做过这样的采访”，“我熟悉另一种语言”等等。回头想想，这真的是一个很好的理由吗？