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实现unicode和字符的互相转换
Jul 18 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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实现的封装验证码类详解
2013/06/18 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
html下载本地
2006/06/19 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
老生常谈python中的重载
2018/11/11 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
营业员实习自我鉴定
2013/12/07 职场文书
趣味比赛活动方案
2014/02/15 职场文书
物理力学求职信
2014/02/18 职场文书
离婚财产分配协议书
2014/10/21 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书