JS中JSON对象和String之间的互转及处理技巧


Posted in Javascript onApril 06, 2016

JSON:JavaScript 对象表示法(JavaScript Object Notation),其实JSON就是一个JavaScript的对象(Object)而已。

如有不清楚JSON,可以去w3cschool了解http://www.w3school.com.cn/json/

1.在javascript中新建一个字符串(JSON文本)。

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval ("(" + txt + ")");

注意:eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本,而不会编译脚本。

在浏览器中,这提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

字符串转json对象:JSON.parse(jsonstr);

json对象转json字符串:JSON.stringify(jsonObj);

JQuery方法:

json字符串转json对象:jQuery.parseJSON(jsonStr);

<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
obj = JSON.parse(txt);
document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

2.那么如何遍历json数组呢?可以把它当成一个普通的javascript对象来处理。

<html>
<body>
<h2>如何遍历JSON数组</h3>
<div id="result"></div>
<script type="text/javascript">
var txt = '[{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]';
var arrayJson = JSON.parse(txt);
var html='';
for(var p in arrayJson){
html+=' firstName:'+arrayJson[p].firstName;
html+=' lastName'+arrayJson[p].lastName;
html+='<br />';
}
document.getElementById("result").innerHTML= html;
</script>
</body>
</html>

ie8(兼容模式),ie7和ie6没有JSON对象,不过http://www.json.org/js.html提 供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;你可以在 https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

ie8(兼容模式),ie7和ie6可以使用eval()将字符串转为JSON对象,

var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
alert(typeof(cToObj));

以上内容是针对JS中JSON对象和String之间的互转及处理技巧,希望对大家有所帮助。接下来给大家补充点知识JavaScript中String和JSON之间的转换。

下面给大家介绍w3c标准的浏览器(如火狐、chrome等)是有一个对象JSON(注意是大写)专门用来处理json的。这个对象有两个函数:

JSON.parse(text) //用于解析json;

JSON.stringify(object) //用于生成json格式;

早期的IE版本没有这个对象,可以去json的官方网站自行下载json2.js对付早期IE版本http://www.JSON.org

下面是之前的一些方法,现在可以弃用了

1.旧方法

function strToJson(str){ 
var json = eval('(' + str + ')'); 
return json; 
}

2.常用

function strToJson(str){ 
return (new Function("return " + str))(); 
}

3.IE不支持的方法

function strToJson(str){ 
return JSON.parse(str); 
}

4.jQuery方法

parseJSON: function( data ) { 
if ( typeof data !== "string" || !data ) { 
return null; 
} 
data = jQuery.trim( data ); 
if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@") 
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]") 
.replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) { 
return window.JSON && window.JSON.parse ? 
window.JSON.parse( data ) : 
(new Function("return " + data))(); 
} else { 
jQuery.error( "Invalid JSON: " + data ); 
} 
},
Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
vue实现全选和反选功能
Aug 31 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
js老生常谈之this,constructor ,prototype全面解析
Apr 05 #Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 #Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 #Javascript
javascript中apply、call和bind的使用区别
Apr 05 #Javascript
JavaScript数组去重的两种方法推荐
Apr 05 #Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 #Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 #Javascript
You might like
php代码优化及php相关问题总结
2006/10/09 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
vue实现计步器功能
2019/11/01 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python实现新浪博客备份的方法
2016/04/27 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python实现磁盘日志清理的示例
2020/11/05 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
Python与C/C++的相互调用案例
2021/03/04 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
道歉信范文
2015/05/12 职场文书
电影建党伟业观后感
2015/06/01 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js