JS中操作JSON总结


Posted in Javascript onDecember 06, 2020

SON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

本文主要是对JS操作JSON的要领做下总结。

在JSON中,有两种结构:对象和数组。

1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:

var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};

2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。

例如:

var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];

为了方便地处理JSON数据,JSON提供了json.js包,下载地址:http://www.json.org/json.js

在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串:

var str1 = '{ "name": "cxh", "sex": "man" }';

JSON对象:

var str2 = { "name": "cxh", "sex": "man" };

一、JSON字符串转换为JSON对象

要运用上面的str1,必须运用下面的要领先转化为JSON对象:

//由JSON字符串转换为JSON对象

var obj = eval('(' + str + ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);

Alert(obj.sex);

特别留心:如果obj本来就是一个JSON对象,那么运用 eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用 parseJSON()函数处理后会有疑问(抛出语法异常)。

二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。

例如:

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

留心:

上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。

js对象与json对象的相互转换

<script> 
  //js对象(student)
  var student = new Object();
  student.name = "Lanny";
  student.age = "25";
  student.location = "China";
  console.log(student);
 
  //将js对象转化为JSON字符
  var last1=JSON.stringify(student);
  console.log(last1);
  console.log(typeof last1);//输出last1的类型
  console.log('--------------------------');
  //由JSON字符串转换为JSON对象/js对象
  var obj1 = eval('(' + last1 + ')');
  var obj2 = JSON.parse(last1);
  console.log(obj1);
  console.log(typeof obj1);
  console.log(obj2);
  console.log(typeof obj2);
 
</script>

效果图:

JS中操作JSON总结

json字符串与json对象的相互转换

<script>    
  //JSON字符串:
  var str1 = '{ "name": "cxh", "sex": "man" }';
  console.log(str1);
  console.log(typeof str1);
  //JSON对象:
  var str2 = { "name": "cxh", "sex": "man" };
  console.log(str2);
  console.log(typeof str2);
  console.log('--------------------------');
  //将js对象转化为JSON字符
  var last1=JSON.stringify(str2);
  console.log(last1);
  console.log(typeof last1);//输出last1的类型
  console.log('--------------------------');
  //由JSON字符串转换为JSON对象
  var obj1 = eval('(' + last1 + ')');
  var obj2 = JSON.parse(str1);
  console.log(obj1);
  console.log(typeof obj1);
  console.log(obj2);
  console.log(typeof obj2);
</script>

效果图:

JS中操作JSON总结

下面是一些补充

在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式:

1.一种为使用eval_r()函数。

2. 使用Function对象来进行返回解析。

在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';

JSON对象:
var str2 = { "name": "cxh", "sex": "man" };

第一种解决方法:

var dataObj=eval_r("("+data+")");//转换为json对象
为什么要 eval这里要添加 “("("+data+")");//”呢?

原因在于:eval本身的问题。由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:

alert(eval_r("{}"); // return undefined
alert(eval_r("({})");// return object[Object]

对于这种写法,在JS中,可以到处看到。

如: (function()) {}();  做闭包操作时等。

var str1 = '{ "name": "cxh", "sex": "man" }';
var data=eval_r("("+str1+")");//转换为json对象//data =(new
alert (data.name);//会显示出cxh

这里特别需要注意的是方式1中的eval_r()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval_r()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。

第二种解决方法:

第二种解析方式就是使用Function对象来完成,它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析

var str1 = '{ "name": "cxh", "sex": "man" }';
var data = (Function("","return "+str1))();
alert (data.name);//会显示出cxh

到此这篇关于JS中操作JSON总结的文章就介绍到这了,更多相关JS操作JSON内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
js模糊查询实例分享
Dec 26 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
动态添加删除表格行的js实现代码
Feb 28 #Javascript
怎么判断js脚本加载完成
Feb 28 #Javascript
JS获取地址栏参数的几种方法小结
Feb 28 #Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 #Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 #Javascript
jQuery之选项卡的简单实现
Feb 28 #Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 #Javascript
You might like
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
浅析php单例模式
2014/11/25 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 查看list中是否含有某元素的方法
2018/06/27 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python遍历小写英文字母的方法
2019/01/02 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
Jdbc数据访问技术面试题
2012/03/30 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
市场营销战略计划书
2014/05/06 职场文书
管理建议书范文
2014/05/13 职场文书
实验室标语
2014/06/21 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
委托书范本
2014/09/13 职场文书
医生辞职信范文
2015/03/02 职场文书
项目战略合作意向书
2015/05/08 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server