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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
详解vue引入子组件方法
Feb 12 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
字节飞书面试promise.all实现示例
Jun 16 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中循环语句的用法介绍
2012/01/30 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
linux下编译安装memcached服务
2014/08/03 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python实现翻转数组功能示例
2018/01/12 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
scrapy-splash简单使用详解
2021/02/21 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
采购文员岗位职责
2013/11/20 职场文书
小学生家长评语集锦
2014/01/30 职场文书
学生手册家长评语
2014/02/10 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
导游词之江南周庄
2019/12/06 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers