本文用很短的时间介绍了如何在JavaScript中编写更简单的条件判断,帮助你写出更简洁易读的代码。假设我们将颜色值转换为十六进制编码函数。functionconvertToHex(color){if(typeofcolor==='string'){if(color==='slate'){return'#64748b'}elseif(color==='gray'){return'#6b7280'}elseif(color==='red'){return'#ef4444'}elseif(color==='orange'){return'#f97316'}elseif(color==='yellow'){return'#eab308'}elseif(color==='green'){return'#22c55e'}else{return'#ffffff'}}else{return'#ffffff'}}这个函数的目标很简单,就是传入颜色字符串,然后返回对应的十六进制。如果传入的不是字符串,或者什么都没有传入,则返回白色十六进制。接下来,我们开始优化这段代码。避免直接使用字符串作为条件直接使用字符串作为条件的问题是当我们拼错它们时会很尴尬。convertToHex("salte")为了避免这个错误,我们可以使用常量。constColors={SLATE:'slate',GRAY:'gray',//...}functionconvertToHex(color){if(typeofcolor==='string'){if(color===Colors.SLATE)}{return'#64748b'}elseif(color===Color.GRAY){return'#6b7280'}//...}else{return'#ffffff'}}convertToHex(Colors.SLATE)如果你使用TypeScript,那么,你可以直接使用枚举。使用对象从上面的代码不难发现,我们可以直接将十六进制值存储在对象的值中。constColors={SLATE:'#64748b',GRAY:'#6b7280',//...}functionconvertToHex(color){if(颜色颜色){returnColors[color]}else{return'#ffffff'}}convertToHex(Colors.SLATE)这段代码会更加简洁易读。不尽如人意,早点回来另一个最佳实践是我们可以在函数的顶部写上意外的返回,以避免忘记返回。常量颜色={SLATE:'#64748b',GRAY:'#6b7280',//...}functionconvertToHex(color){if(!colorinColors){return'#ffffff'}returnColors[color]}convertToHex(Colors.SLATE)所以你甚至不需要else。使用这个技巧,我们可以消除代码中的许多其他内容。UsingMapwithObjectUsingMap更专业,因为它可以存储任何类型的键,并且它继承自Map.prototype具有更方便的方法和属性。而Object访问属性更方便,我们可以继续使用Object来实现枚举的作用。constColorsEnum={SLATE:'slate',GRAY:'gray',//...}constColors=newMap()Colors.set(ColorsEnum.SLATE,'#64748b')Colors.set(ColorsEnum.GRAY,'#6b7280')//...Colors.set('DEFAULT','#ffffff')functionconvertToHex(color){if(!Colors.has(color)){returnColors.get('DEFAULT')}returnColors.get(color)}convertToHex(Colors.SLATE)Map也可以存储函数假设我们存储的颜色很多,最多上千种,还需要支持后端配置,通过一定的操作可以得到结果过程。然后我们可以使用Map来存储函数。returnColors.get(color)()尽量避免三元表达式和switch三元表达式虽然很短,但是可读性大大降低。如果是多级条件,读起来会很困难。switch和if并没有明显的优势,但有时很容易返回,导致代码无法按预期执行。
