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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
jQuery中extend函数详解
Feb 13 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
用PHP函数解决SQL injection
2006/12/09 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
Python数据正态性检验实现过程
2020/04/18 Python
Python如何获取文件路径/目录
2020/09/22 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
华润集团网上药店:健一网
2016/09/19 全球购物
动员大会主持词
2014/03/20 职场文书