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 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 Javascript
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/12/03 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
javascript History对象原理解析
2020/02/17 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python格式化字符串实例总结
2014/09/28 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
详解Django admin高级用法
2019/11/06 Python
基于python实现学生信息管理系统
2019/11/22 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
公司JAVA开发面试题
2015/04/02 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
施工员岗位职责
2014/03/16 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
求职自我推荐信
2015/03/24 职场文书
高中信息技术教学反思
2016/02/16 职场文书
《所见》教学反思
2016/02/23 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python