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技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
Angular8路由守卫原理和使用方法
Aug 29 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
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
python进阶教程之异常处理
2014/08/30 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
python简单操作excle的方法
2018/09/12 Python
python实现朴素贝叶斯算法
2018/11/19 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python进程和线程用法知识点总结
2019/05/28 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
企业文化宣传标语
2014/06/09 职场文书
还款承诺书范本
2015/01/20 职场文书
团代会邀请函
2015/02/02 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
详解Python常用的魔法方法
2021/06/03 Python