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小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
使用jQuery实现购物车
Oct 29 jQuery
如何利用React实现图片识别App
Feb 18 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实现简单爬虫的方法
2015/07/29 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
Python变量作用范围实例分析
2015/07/07 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Django中的ajax请求
2018/10/19 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Python是什么 Python的用处
2020/05/26 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
公司JAVA开发面试题
2015/04/02 面试题
烹调加工管理制度
2014/02/04 职场文书
2015新学期开学寄语
2015/02/26 职场文书
男方婚前保证书
2015/02/28 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
2015年司法局工作总结
2015/05/22 职场文书
儿子满月酒致辞
2015/07/29 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
python实现网络五子棋
2021/04/11 Python