javascript - 如何优化多层嵌套的循环和条件判断代码?
高洛峰
高洛峰 2017-04-11 13:20:33
[JavaScript讨论组]

逻辑稍微复杂点,就很容易出现for循环中嵌套if语句。比如:

menus:[{
        id:"index",
        title:"首页",
        isVisible:true
    },{
        id:"apps",
        title:"应用中心",
        isVisible:true,
        children:[{
                id:"index",
                title:"首页",
                isVisible:true
            }
        ]
    }
]

这段代码先遍历menus数组,然后判断是否显示,在判断是否有二级栏目,再遍历二级栏目。。简化版代码:

for(var i=0;i

有些代码检测工具是不赞同多层for/if 等嵌套的,最多三层,但这段代码都有五层嵌套了。。 求教各位大神,这类代码应该怎么优化? 感谢感谢!!

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(5)
PHP中文网

这种含有子元素children,并且子元素和父级元素的结构是相似的,明显应该用递归或者while来进行遍历嘛。

(function forEach(menus){
    for(var i = 0; i < menus.length; i++){
        //这里的 == true 完全没有必要
        if(menus[i].isVisible){
            //dosomething....
            if(menus[i].children){
                //有子元素,那么就递归
                forEach(menus[i].children);
            }
        }
    }
})(menus);
伊谢尔伦

换种写法可以降到3层:

// 第一层
for(var i=0;i<menus.length;i++){
  // 为了减少层次,先判断不符合的情况                                                 
  if(menus[i].isVisible != true){                                                
    continue;                                                                    
  }                                                                              
  dosomething....;  // isVisible == true
  // 第二层                                      
  if(menus[i].children){
    // 第三层                                                         
    for(var j=0;j<menus[i].children.length;j++){
      // 为了减少层次,先判断不符合的情况                                      
      if(menus[i].children[j].isVisible != true){                                   
        continue;                                                                   
      }                                                                             
      dosomething.....                                                              
    }                                                                               
  }                                                                                 
}
迷茫

请使用递归。

var menus=[{
        id: "index",
        title: "首页",
        isVisible: true
    },
    {
        id: "apps",
        title: "应用中心",
        isVisible: true,
        children: [{
                id: "11",
                title: "aaa",
                isVisible: true,
                children:[{
                    id: "12",
                    title: "bbb",
                    isVisible: true,
                    children:[{
                        id: "13",
                        title: "ccc",
                        isVisible: true
                    }]
                }]
            }
        ]
    }
];


function func(array) {

    for(var i=0;i<array.length;i++)
    {
        if(array[i].isVisible){
            console.log(array[i].id)
        }
        if(array[i].children)
        {
            func(array[i].children);
        }
    }

}
console.time('time');
func(menus);
console.timeEnd('time');
PHP中文网

看看是不是可以这样?
for(var i=0;i<menus.length;i++){

if(menus[i].isVisible != true){
    continue;
}
dosomething....
if(!menus[i].children){
     continue;
}  
for(var j=0;j<menus[i].children.length;j++){
    if(menus[i].children[j].isVisible != true){
          continue;     
    } 
    dosomething.....       
}      

}

高洛峰
function fn(arr) {
  if (!Array.isArray(arr)) return;
  arr.forEach((item) => {
    if (!item.isVisible) return;
    // dosomething....
    console.log(item.title);
    if (item.children && Array.isArray(item.children) && item.children.length > 0) fn(item.children);
  });
}
fn(menus)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号