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 相关文章推荐
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
es6数值的扩展方法
Mar 11 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
微信小程序中target和currentTarget的区别小结
Nov 06 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加密解密的代码
2006/10/09 PHP
PHP 输出缓存详解
2009/06/20 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js模仿jquery的写法示例代码
2013/06/16 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
股份转让协议书
2014/04/12 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
Python 中的 copy()和deepcopy()
2021/11/07 Python
django中websocket的具体使用
2022/01/22 Python