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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
Less 安装及基本用法
May 05 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
Javascript webpack动态import
Apr 19 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php多重接口的实现方法
2015/06/20 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
javascript编写简易计算器
2017/05/06 Javascript
es6数值的扩展方法
2019/03/11 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
深入理解Django的中间件middleware
2018/03/14 Python
django删除表重建的实现方法
2019/08/28 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
Django操作session 的方法
2020/03/09 Python
Python多线程多进程实例对比解析
2020/03/12 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
测控技术与仪器个人求职信范文
2013/12/30 职场文书
自荐信写法介绍
2014/01/25 职场文书
讲座主持词
2014/03/20 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
python实现简单反弹球游戏
2021/04/12 Python