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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
JS实现简单日历特效
Jan 03 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
How do I change MySQL timezone?
2008/03/26 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
Python实现的归并排序算法示例
2017/11/21 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
Python占用的内存优化教程
2019/07/28 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
女生抽烟检讨书
2014/10/05 职场文书
婚前协议书范本两则
2014/10/16 职场文书
三方协议书
2015/01/27 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
《春酒》教学反思
2016/02/22 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
Python中的 No Module named ***问题及解决
2022/07/23 Python