js三元运算符_这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句

最近在重构代码时,我发现早期的代码使用太多的 if 语句,其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的,这些技巧可以帮助我们避免过多的使用 if 语句。

接下来会介绍6种方式来代替 if 的使用,这样做不是坚决不使用 if 偏执狂,而是换个方式思考我们的编码思路。

1. 三元运算符

事例1

带有IF的代码:

aa64767e61c9e256167dc702098cacd3.png

重构后代码:

f7a8af2caa2eae00e13e05abf82bc077.png

使用 ES6

0a8f569f97aa152359e1f38aa400d33d.png
事例2

带有IF的代码:

d902948571db9a488ce1300b1645f04d.png

重构后代码:

0d4d768fae18cb735f552d7441b7bec8.png
事例3

带有IF的代码:

30036a98b47789e9ab5a192ebdc51705.png

重构后代码:

db5bc0fda3f5c9a8e6c98075ab971190.png

2.短路运算符

事例1

带有IF的代码:

4376f0d25e9f13a1b506c0917ecdc0f7.png

重构后代码:

7fe4147dbd044a964d8e275d8c4c63c6.png
事例2

带有IF的代码:

e917f18da3af3558bfea3a4f52bca04e.png

重构后代码:

7d1404aea495a66f192f33fa0ed707b8.png

3.函数委托:

事例1

带有IF的代码:

109317508a03d30f826f092cc13d253a.png

重构后代码:

f88af915c81a74dc0f6494bb2926e581.png

4.非分支策略

此技巧尝试避免使用switch语句,相反是用键/值创建一个映射并使用一个函数访问作为参数传递的键的值。

事例1

带有switch的代码:

4d872a2bf643b8c485b49ac6bb607d9c.png

重构后代码:

547d7a36067e06ddfedc7f1c0044a31e.png

5.作为数据的函数

我们知道在JS中函数是第一个类,所以使用它我们可以把代码分割成一个函数对象。

带有IF的代码:

0cc14dabd658bdcf54da6c8211f0ed6c.png

重构后代码:

212957e9871df952d5f45fa832f6ba69.png

6.多态性

多态性是对象具有多种形式的能力。OOP中多态性最常见的用法是使用父类引用来引用子类对象。

带有IF的代码:

b850cfed75223442ddac6d879db204cf.png

重构后代码:

608cbc5d65569fcaf2e2d5d52a417cdd.png

原文:https://dev.to/damxipo/avoid-use-if-on-our-js-scripts-1b95

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值