js用闭包遍历树状数组的方法

 更新时间:2014年03月19日 09:39:19   作者:  
这篇文章主要介绍了js中用闭包遍历树状数组的方法,需要的朋友可以参考下

做公司项目时,要求写一个方法,方法的参数为一个菜单数组集合和一个菜单id,菜单数组的格式为树状json,如下面所示:

复制代码 代码如下:
[{"id":28,"text":"公司信息","children":[

     {"id":1,"text":"公司文化"},

     {"id":2,"text":"招聘计划"},

     {"id":6,"text":"公司新闻","children":[

          {"id":47,"text":"行业新闻"}]},

          {"id":11,"text":"内部新闻","children":[

                         {"id":24,"text":"行政信息"},

                         {"id":27,"text":"高层指示"}]},

          {"id":22,"text":"联系我们"},

          {"id":26,"text":"产品展示","children":[

                         {"id":32,"text":"电力产品"},

                         {"id":33,"text":"配件介绍"}}]

 }] }]

现在给出的菜单id为32,要求找到对应的项,并返回对应的菜单名称,方法是先循环遍历数组,当项的id等于指定的id时,将菜单名称取出,如果不等于则看当前项是否有children,如果children不为空且数量大于0,则遍历children,这时就要用到javascript的闭包,将遍历children的方法放在一个匿名方法中,这样一直在匿名方法中递归自身,当遇到相同名称的id,就跳出循环,然后从主方法中返回得到的菜单名称,代码如下:

复制代码 代码如下:
function getMenuName(menus, id) {
  var name = "" ;
  for (var i = 0; i < menus.length; i++) {
    if (menus[i].id == id) {
      name = menus[i].text;
      break;
    }
    else {
       (function () {
        var m = arguments[0];
        var menuid = arguments[1];
        for (var j = 0; j < m.length; j++) {
          if (m[j].id == menuid) {
            name = m[j].text;
            break;
          }
          else if m[j].children != null && m[j].children.length > 0) {
            arguments.callee(m[j].children, val);//递归匿名方法
          }
        }
      })(menus[i].children, id);
    }
  }
  return name;
}

相关文章

  • 基于iScroll实现下拉刷新和上滑加载效果

    基于iScroll实现下拉刷新和上滑加载效果

    这篇文章主要为大家详细介绍了基于iScroll实现下拉刷新和上滑加载效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • IE中图片的onload事件无效问题和解决方法

    IE中图片的onload事件无效问题和解决方法

    这篇文章主要介绍了IE中图片的onload事件无效问题和解决方法,这是一个很经典的问题,其实只需要调换一下代码顺序即可解决,需要的朋友可以参考下
    2014-06-06
  • js实现旋转的星空效果

    js实现旋转的星空效果

    这篇文章主要为大家详细介绍了js实现旋转的星空效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • js修改table中Td的值(定义td的单击事件)

    js修改table中Td的值(定义td的单击事件)

    单击事件,将Td内容更新为一个Div,其中装载了一个Text,用于用户输入新的Td的值,一个确定按钮,一个取消按钮,用于保存或取消用户的输入内容
    2013-01-01
  • 详解webpack4之splitchunksPlugin代码包分拆

    详解webpack4之splitchunksPlugin代码包分拆

    这篇文章主要介绍了详解webpack4之splitchunksPlugin代码包分拆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JS获取元素多层嵌套思路详解

    JS获取元素多层嵌套思路详解

    这篇文章主要介绍了JS获取元素多层嵌套思路详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • echarts动态渲染柱状图背景颜色及顶部数值方法详解

    echarts动态渲染柱状图背景颜色及顶部数值方法详解

    在使用echarts时,有时需要给柱状图设置背景,下面这篇文章主要给大家介绍了关于echarts动态渲染柱状图背景颜色及顶部数值的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • js parentElement和offsetParent之间的区别

    js parentElement和offsetParent之间的区别

    这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性。 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下。
    2010-03-03
  • javascript相关事件的几个概念

    javascript相关事件的几个概念

    对于事件来讲,首先,我们需要了解这样几个概念:事件;事件处理程序;事件类型;事件流;事件冒泡;事件捕获;事件对象;事件方面的性能优化(事件委托、移除事件处理程序);常见的浏览器兼容问题。
    2015-05-05
  • 老生常谈 js中this的指向

    老生常谈 js中this的指向

    下面小编就为大家带来一篇老生常谈 js中this的指向。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论