JavaScript动态操作JSON数组与对象的完整指南
本文详细介绍在JavaScript中如何对JSON数据进行动态赋值。重点讲解使用JSON.parse将字符串转换为对象后通过push方法添加元素,以及直接操作JSON对象的属性。同时对比eval与JSON.parse的用法差异,并提供动态创建数组和对象的多种实现方式,帮助开发者避免常见错误。
本文通过具体示例,介绍在JavaScript中为JSON数组动态赋值的操作方法,供读者参考学习。
JSON数组本质上仍属于数组类型,遵循数组的操作规则。
//1、
var jsonstr="[{'name':'a','value':1},{'name':'b','value':2}]";
var jsonarray = eval('('+jsonstr+')');
var arr =
{
"name" : $('#names').val(),
"value" : $('#values').val()
}
jsonarray.push(arr);
//2、
var json={};// 定义一个json对象
json.array1=["2","4"];// 增加一个新属性,此属性是数组
json.array1[json.array1.length]='6';// 数组追加一个元素
alert(json.array1)
针对JSON格式的字符串进行动态赋值处理。
对于JSON类型的字符串,需先调用json.parse()方法将其解析为JSON对象,随后赋值给一个变量,最后对该变量使用push方法进行动态赋值。
若直接尝试调用json.parse("jsonString").push,程序将报错提示push is not a function。
为简化操作,可直接使用(json.parse("jsonString")).push的方式链式调用。
var arr = {"id": scheduleId, "isDelete": true};
var jsonArray = JSON.parse(scheduleList);
jsonArray.push(arr);
以下是其他开发者的补充内容。
在JavaScript中动态创建JSON对象,并为JSON对象动态添加属性及对应的属性值。
var param = {};
for(var i=0;i<fields.length;i++){
var field = fields[i];
if(field.searchCondition != undefined && $('#search'+field.name).val() != ''){
param["search."+field.name]=$('#search'+field.name).val();
}
}
在JS语法中,方括号[]被识别为数组,花括号{}被识别为JSON对象。
var json = {};
定义一个空的JSON对象。
为已定义的JSON对象进行赋值操作。
json[aa] = "xx";
使用eval解析JSON字符串时若报错提示缺少分号,且确认JSON串格式无误,可尝试使用eval('('+json+')');,注意将双引号替换为单引号。
JavaScript中动态创建数组及为JSON数据动态赋值的另一种方法。
/*测试:动态创建数组,动态赋值json数据*/
var json2 = "{'name':'zhangsan','age':99}";
var persons = new Array();
persons[ 0 ] = new Object();
persons[ 0 ].name = "xxx";
persons[ 0 ].age = 18;
persons[ 1 ] = new Function("return" + json2 )();
alert( persons[ 1 ].name + persons[ 1 ].age );
/*上面结果显示 zhangsan99*/
/* json里面的数组转为JS的数组*/
var jsonXX = "[ {name:'zhangsan',age:99},{name:'lisi',age:77}]";
var obj = new Function("return "+jsonXX)();
for(var b in obj)
{
alert(obj[b].name);
}
/*补充安全一点做法是,要判断一下*/
var obj=(function ToJSON(o)
{
if( typeof ( o ) == "string")
{
try
{
return new Function("return "+o)();
}
catch( e )
{
return null;
}
}
})( jsonXX);
将JSON格式的字符串转换为JavaScript对象或数组。
第一种转换方式。
JSON.parse(jsonString)
第二种转换方式。
eval("("+jsonString+")")
或者采用以下写法。
eval('('+json+')');
第三种转换方式。
var obj=(function ToJSON(o){ if(typeof(o)=="string")try{return new Function("return "+o)();}catch(e){return null;} })("[{name:'zhangsan',age:'24'},{name:'lisi',age:'30'},{name:'wangwu',age:'16'},{name:'tianqi',age:'7'}]"); for(var b in obj)alert(obj[b].name);
补充说明:关于JSON操作,推荐以下实用的在线JSON工具供参考:
在线JSON代码检验、格式化、美化及格式化工具: http://tools.jb51.net/code/json
JSON在线格式化工具: http://tools.jb51.net/code/jsonformat
在线XML与JSON互相转换工具: http://tools.jb51.net/code/xmljson
JSON代码在线格式化、美化、压缩、编辑及转换工具: http://tools.jb51.net/code/jsoncodeformat
在线JSON压缩及转义工具: http://tools.jb51.net/code/json_yasuo_trans
如需了解更多JavaScript相关内容,可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文所述的JSON动态赋值方法对JavaScript程序设计有所帮助。
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
