zoukankan      html  css  js  c++  java
  • 避免if语句的深层次嵌套

    公司做了个抢红包的限制,然后ajax请求的返回字段,要进行多层逻辑的判断,想想是真恶心,虽然都是简单逻辑,而且看别人以前写的代码,发现,哎,注释能不能写上吶,像我写代码都是细致到,哪怕初学者也能看懂这是要实现什么,还有尽量避免深层次的if嵌套,不然后面产品要加新需求,条件限制了,来个五六个if嵌套,,想想都蛋疼了,故而就查询了一下如何优化,然后把之前的代码给重新整理了下,哎,强迫症又犯了,明明不是自己挖的坑,还是想填了!


    那么问题来了,在js开发中,如何减少if else语句的使用

    代码中嵌套的if/else结构往往导致代码不美观,也不易于理解。面向过程的开发中代码有大量的IF ELSE,在java中可以用一些设计模式替换掉这些逻辑,那么在js中是否也有类似的方法用来尽可能减少代码中的if/else嵌套呢?

    有人认为:if else多就多呗,只要可读性强,维护起来方便。jQuery.fn.init里就是一堆if else判断,难道要质疑jQuery作者的水平了?并不是说if else多就不好,关键是看用的地方,jQuery.fn.init里除了if else判断简洁点,难道要改成switch?就算用工厂模式,还不是得做大量的if判断。

    代码整洁强迫症患者必须要来个抛砖引玉:

    1.

    1. if(a为真){
    2. a=a
    3. }else{
    4. a=b
    5. }

    可写成:a = a || b

    2.

    1. if(a==b){
    2. a=c
    3. }else{
    4. a=d
    5. }

    可写成:a = (a==b) ? c : d

    3.

    后台接口通常会返回这种数据:

    fruit: 0 // 0=苹果,1=梨子,2=桔子,3=柠檬,4=芒果...

    这时写if...else是最痛苦的。从冲哥那偷来个方法:

    1. var _f = ['苹果','梨子','桔子','柠檬','芒果'];
    2. shuiguo = _f[fruit];

    建议:

    第一步:优化if逻辑

    人们考虑的东西到时候,都会把最可能发生的情况先做好准备。优化if逻辑的时候也可以这样想:把最可能出现的条件放在前面,把最不可能出现的条件放在后面,这样程序执行时总会按照带啊名的先后顺序逐一检测所有的条件,知道发现匹配的条件才会停止继续检测。

    if 的优化目标:最小化找到分支之前所判断条件体的数量。if优化的方法:将最常见的条件放在首位。

    1. if (i < 5) {
    2. // 执行一些代码
    3. } else if (i > 5 && i < 10) {
    4. // 执行一些代码
    5. } else {
    6. // 执行一些代码
    7. }

    例如上面这个例子,只有在 i 值经常出现小于5的时候是最优化的。如果i值经常大于或者等于10的话,那么在进入正确的分支之前,就必须两次运算条件体,导致表达式的平均运算时间增加。 if 中的条件体应该总是按照从最大概率到最小概率排列,以保证理论速度最快。

    第二步:尽量少使用else

    如果在函数中,可以使用 if + return ,先判断错误条件,然后立马结束函数,防止进入 else 分支。

    举个简单的例子,后端返回数据,前端根据状态进行不同操作

    1. $.ajax().done(function (res) {
    2. if (res.state === 'SUCCESS') {
    3. //TODO
    4. } else if (res.state === 'FAIL') {
    5. //TODO
    6. } else {
    7. //TODO
    8. }
    9. });

    这里用if else不挺好的么,有啥问题么?不过我个人倾向于switch。

    解决方法:

    1. switch/case

    switch和if else在性能上是没有什么区别的,主要还是根据需求进行分析和选择。

    • 如果条件较小的话选用if else比较合适。

    • 相反,条件数量较大的话,就建议选用switch。

    一般来说,if else适用于两个离散的值或者不同的值域。如果判断多个离散值,使用switch更加合适。

    在大多数的情况下switch比if else运行的更加快。

    在大多数情况下,switch的性能不会比if else低。switch的确在实质上跟if else if 完全一样的效果,不过在很多情况下,使用switch要比if else方便不少

    比如经典的值等分支,匹配一些状态常量的时候,比if else结构方便许多,不用反复写xx == yy

    1. $.ajax().done(function (res) {
    2. switch (res.state) {
    3. case 'SUCCESS':
    4. //TODO
    5. break;
    6. case 'FAIL':
    7. //TODO
    8. break;
    9. default :
    10. //TODO
    11. }
    12. });

    注意:千万不要忘记在每一个case语句后面放一个break语句。也可以放一个return或者throw。case语句匹配expression是用===而不是==。

    2.hash 表

    1. if (key == "Apple") {
    2. val = "Jobs";
    3. } else if (key == "microsoft"){
    4. val = "Gates";
    5. } else if (key == "Google"){
    6. val = "Larry";
    7. }

    这个也可以用 switch case 解决,不过推荐的方法是 hash 表:

    1. var ceos = {"Apple":"Jobs", "microsoft":"Gates", "Google":"Larry"};
    2. val = ceos[key];

    3.重构,用 OO 里面的继承或者组合

    1. 1.如果是狗,则汪汪
    2. 2.如果是猫,则喵喵
    3. 3.如果是羊,则咩咩
    4. 4.如果是鸭,则嘎嘎

    可以重构一下,改成 OO。

    1. *定义类: 动物(或者接口)
    2. *定义方法:叫
    3. *定义子类:狗、猫、羊、鸭
    4. *重写方法 ---- 叫

    也就是说将同的判断按照功能,写成函数,这样也便于阅读

    比如我有一个方法根据类型获取名称,用if else会这样

    1. function getName(type) {
    2. if (type === 'monkey') {
    3. return 'monkey name';
    4. } else if (type === 'cat') {
    5. return 'cat name';
    6. } else {
    7. return 'dog name';
    8. }
    9. }

    如果写成函数,改成下面的会更好

    1. function getName(type) {
    2. var data = {
    3. monkey: 'monkey name',
    4. cat: 'cat name',
    5. dog: 'dog name'
    6. }
    7. return data[type] ? data[type] : data['dog'];
    8. }

    硬要把设计模式添加到JS里不是不可以,但是要看情况。生搬硬套过来的东西然并卵啊。写代码记住三个字即可,短简易。代码短,读起来简单,维护容易,如果在性能和代码长度上二选一,我肯定选代码短,性能不行,加台服务器就是了。而冗长的代码并不是加个程序员就能搞定的。

    保持着这个心态写代码,写出的东西离设计模式也不会差太多了。

  • 相关阅读:
    Python基础课:类的特殊方法
    绳结大全*****连结丶圈结
    绳结大全*****捆扎丶捆绑他物之绳结
    绳结大全*****末端结丶装饰丶瘤结丶收缩
    Excel:80个最有必要掌握的函数丶65个最有必要知道的快捷键
    excel函数语法,应用(copy+截图)
    聚类K-means算法
    逻辑回归
    MySql-第三部分(外键, 多表连接, 事务,视图 )
    各种计算距离方法总结(转)
  • 原文地址:https://www.cnblogs.com/jpfss/p/10036624.html
Copyright © 2011-2022 走看看