JavaScript中变量作用域导致JSON树生成错误的排查与修复

作者:拾光时间:2026-10-29 12:28:05浏览:632

本文通过一个基于JSON数据生成树状目录的JavaScript实例,分析了因变量str定义位置不当导致的作用域错误。通过将该变量改为局部变量,成功解决了生成的目录树结构异常问题,提供了具体的代码修改对比与效果展示。

JSON树生成中的变量作用域问题

在最近的项目开发中,需要依据JSON数据构建一个树状的目录结构。初始实现的代码如下所示:


var folderList=[
  {
    "FolderName": "ASD",
    "ChildList": null
  },
  {
    "FolderName": "内网公告",
    "ChildList": null
  },
  {
    "FolderName": "测试文档",
    "ChildList": null
  },
  {
    "FolderName": "软件开发",
    "ChildList": null
  },
  {
    "FolderName": "Test",
    "ChildList": [
      {
        "FolderName": "Test2",
        "ChildList": [
          {
            "FolderName": "Test3",
            "ChildList": null
          }
        ]
      }
    ]
  },
  {
    "FolderName": "个人",
    "ChildList": null
  },
  {
    "FolderName": "公司通知",
    "ChildList": null
  },
  {
    "FolderName": "采购平台",
    "ChildList": null
  }
];
      var str='';
      function generateFolders(arr) {
        if (arr.length > 0) {
          str += '<div class="sui-list sui-list-icon ubt bc-gra1">';
          for (var i = 0, len = arr.length; i < len; i++) {
            str += '<ul class="ub ub-ac">' 
                + '<li class="sui-list-licon sui-icon-ok-circle fts2">' + '</li>' 
                + '<ul class="ub ub-f1 sui-list-item">' 
                 + '<li class="ub-f1 sui-list-text sui-list-nowrap">' + arr[i].FolderName + '</li>' 
                 + '<li class="sui-list-ricon ub-img sui-icon-chevron-right fts2"></li>' 
                + '</ul>' 
               + '</ul>';
            if (isDefine(arr[i].ChildList)) {
              str += generateFolders(arr[i].ChildList);
            }
          }
          str += '</div>';
          return str;
        }else{
          return '';
        }
      }

      var folderTxt ='<div class="sui-list sui-list-icon ubt bc-gra1">' 
                 +'<ul class="ub ub-ac">' 
                   +'<li class="sui-list-licon sui-icon-drawer fts2">' + '</li>' 
                   +'<ul class="ub ub-f1 sui-list-item">' 
                     +'<li class="ub-f1 sui-list-text sui-list-nowrap">我的目录</li>' 
                     +'<li class="sui-list-ricon ub-img sui-icon-chevron-right fts2"></li>' 
                   +'</ul>' 
                 +'</ul>';
      folderTxt+=generateFolders(folderList);
      folderTxt += '</div>';
      $('#list').html(folderTxt);
      /**
       * 判断是否是空
       * @param value
       */
      function isDefine(value){
        if(value == null || value == "" || value == "undefined" || value == undefined || value == "null" || value == "(null)" || value == 'NULL' || typeof(value) == 'undefined'){
          return false;
        }
        else{
       value = value+"";
          value = value.replace(/\s/g,"");
          if(value == ""){
            return false;
          }
          return true;
        }
      }

运行上述代码后,生成的树状结构如图所示:

JSON树生成中的变量作用域问题

经过仔细排查,发现问题的根源在于变量str的定义位置不正确。通过将其修改为局部变量,即可解决该问题。


function generateFolders(arr) {
        var str='';
        if (arr.length > 0) {
          str += '<div class="sui-list sui-list-icon ubt bc-gra1">';
          for (var i = 0, len = arr.length; i < len; i++) {
            str += '<ul class="ub ub-ac">' 
                + '<li class="sui-list-licon sui-icon-ok-circle fts2"></li>' 
                + '<ul class="ub ub-f1 sui-list-item">' 
                  + '<li class="ub-f1 sui-list-text sui-list-nowrap">' + arr[i].FolderName + '</li>' 
                  + '<li class="sui-list-ricon ub-img sui-icon-chevron-right fts2"></li>' 
                + '</ul>' 
              + '</ul>';
            if (isDefine(arr[i].ChildList)) {
              str += generateFolders(arr[i].ChildList);
            }
          }
          str += '</div>';
          return str;
        }else{
          return '';
        }
      }

完成修改后,程序能够按照预期生成正确的树状目录,效果如下:

JSON树生成中的变量作用域问题

以上即为关于该JavaScript作用域问题的完整分析与解决方案。

作者最新文章