最近在重构代码时,我发现早期的代码使用太多的 if 语句,其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的,这些技巧可以帮助我们避免过多的使用 if 语句。
接下来会介绍6种方式来代替 if 的使用,这样做不是坚决不使用 if 偏执狂,而是换个方式思考我们的编码思路。
1. 三元运算符
事例1
带有IF的代码:
![aa64767e61c9e256167dc702098cacd3.png](https://i-blog.csdnimg.cn/blog_migrate/34413a8443855ac0beba94c6c732bff8.jpeg)
重构后代码:
![f7a8af2caa2eae00e13e05abf82bc077.png](https://i-blog.csdnimg.cn/blog_migrate/11a224139ba20941cd23f456bbd082a4.jpeg)
使用 ES6
![0a8f569f97aa152359e1f38aa400d33d.png](https://i-blog.csdnimg.cn/blog_migrate/ecadd14a09c675c8c4b3df1341046cb2.jpeg)
事例2
带有IF的代码:
![d902948571db9a488ce1300b1645f04d.png](https://i-blog.csdnimg.cn/blog_migrate/b7c23bd0c18d51dbc425eff4bc531889.jpeg)
重构后代码:
![0d4d768fae18cb735f552d7441b7bec8.png](https://i-blog.csdnimg.cn/blog_migrate/824977f45ce06fbd41468f0610c724c2.jpeg)
事例3
带有IF的代码:
![30036a98b47789e9ab5a192ebdc51705.png](https://i-blog.csdnimg.cn/blog_migrate/04f386212c2b6fc1fef3c95b36ce242a.jpeg)
重构后代码:
![db5bc0fda3f5c9a8e6c98075ab971190.png](https://i-blog.csdnimg.cn/blog_migrate/78a697b4eee4ff5dca9693976631920d.jpeg)
2.短路运算符
事例1
带有IF的代码:
![4376f0d25e9f13a1b506c0917ecdc0f7.png](https://i-blog.csdnimg.cn/blog_migrate/c10c07bafa2164c3fb0da56260b989ad.jpeg)
重构后代码:
![7fe4147dbd044a964d8e275d8c4c63c6.png](https://i-blog.csdnimg.cn/blog_migrate/c5559ed7c1657008224d3602d306f3fb.jpeg)
事例2
带有IF的代码:
![e917f18da3af3558bfea3a4f52bca04e.png](https://i-blog.csdnimg.cn/blog_migrate/6ec1e5fc08059edc90b9a078c1cd9967.jpeg)
重构后代码:
![7d1404aea495a66f192f33fa0ed707b8.png](https://i-blog.csdnimg.cn/blog_migrate/77dff7fa8cd04582370c5f39f642f9de.jpeg)
3.函数委托:
事例1
带有IF的代码:
![109317508a03d30f826f092cc13d253a.png](https://i-blog.csdnimg.cn/blog_migrate/6858539ada18e8beb34157c716392995.jpeg)
重构后代码:
![f88af915c81a74dc0f6494bb2926e581.png](https://i-blog.csdnimg.cn/blog_migrate/e9df7c330aab81c88caf4d425461dcea.jpeg)
4.非分支策略
此技巧尝试避免使用switch语句,相反是用键/值创建一个映射并使用一个函数访问作为参数传递的键的值。
事例1
带有switch的代码:
![4d872a2bf643b8c485b49ac6bb607d9c.png](https://i-blog.csdnimg.cn/blog_migrate/81d9c1b86b028bbc0fdebe8ad36a2118.jpeg)
重构后代码:
![547d7a36067e06ddfedc7f1c0044a31e.png](https://i-blog.csdnimg.cn/blog_migrate/168f9a712ce9cf86299bfc11328c1c4a.jpeg)
5.作为数据的函数
我们知道在JS中函数是第一个类,所以使用它我们可以把代码分割成一个函数对象。
带有IF的代码:
![0cc14dabd658bdcf54da6c8211f0ed6c.png](https://i-blog.csdnimg.cn/blog_migrate/529235e94ee87b79045a7d1046e2e001.jpeg)
重构后代码:
![212957e9871df952d5f45fa832f6ba69.png](https://i-blog.csdnimg.cn/blog_migrate/93f19204f6f759869e3a80d6f2ed3fc9.jpeg)
6.多态性
多态性是对象具有多种形式的能力。OOP中多态性最常见的用法是使用父类引用来引用子类对象。
带有IF的代码:
![b850cfed75223442ddac6d879db204cf.png](https://i-blog.csdnimg.cn/blog_migrate/d1627f22ddb62b2f96051d441c6c32b0.jpeg)
重构后代码:
![608cbc5d65569fcaf2e2d5d52a417cdd.png](https://i-blog.csdnimg.cn/blog_migrate/de39a3a3fb215df2029089883b6db25d.jpeg)
原文:https://dev.to/damxipo/avoid-use-if-on-our-js-scripts-1b95