javascript作用域问题实例分析

最近做项目过程中需要根据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 += '';
   for (var i = 0, len = arr.length; i < len; i++) {
     str += '
' 
  + '
' + '
' 
  + '
' 
   + '
' + arr[i].FolderName + '
' 
   + '
' 
  + '
' 
 + '
';
     if (isDefine(arr[i].ChildList)) {
str += generateFolders(arr[i].ChildList);
     }
   }
   str += '';
   return str;
 }else{
   return '';
 }
      }

      var folderTxt ='' 
   +'
' 
     +'
' + '
' 
     +'
' 
+'
我的目录
' 
+'
' 
     +'
' 
   +'
';
      folderTxt+=generateFolders(folderList);
      folderTxt += '';
      $('#list').html(folderTxt);
      
      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;
 }
      }

结果出来的树如下图：

经排查，发现是由于str定义的位置不对引起的，将str定义为局部变量就可以了。

function generateFolders(arr) {
 var str='';
 if (arr.length > 0) {
   str += '';
   for (var i = 0, len = arr.length; i < len; i++) {
     str += '
' 
  + '
' 
  + '
' 
    + '
' + arr[i].FolderName + '
' 
    + '
' 
  + '
' 
+ '
';
     if (isDefine(arr[i].ChildList)) {
str += generateFolders(arr[i].ChildList);
     }
   }
   str += '';
   return str;
 }else{
   return '';
 }
      }

修改之后，可实现想的效果：

以上所述就是本文的全部内容了，希望大家能够喜欢。