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;
}
}
运行上述代码后,生成的树状结构如图所示:

经过仔细排查,发现问题的根源在于变量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 '';
}
}
完成修改后,程序能够按照预期生成正确的树状目录,效果如下:

以上即为关于该JavaScript作用域问题的完整分析与解决方案。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
相关标签:
