JavaScript常见JSON操作实例分析


Posted in Javascript onAugust 08, 2018

本文实例讲述了JavaScript常见JSON操作。分享给大家供大家参考,具体如下:

1、JSON

JSON,JavaScript Object Notation)(JavaScript对象表示法) ,是存储和交换文本信息的语法,是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小,类似 XML,但JSON 比 XML更小、更快,更易解析。

JSON不支持变量、函数、对象实例,只是一种数据的格式。数据在键值对中,数据由逗号分隔。

2、JSON数据类型

(1)简单数据类型:字符串、数值、布尔值,null(不支持JavaScript的 undefined)。

(2)对象:无序的键值对。

(3)数组:有序的值列表。

3、JSON对象与JavaScript对象的不同

(1)属性必须用双引号(最好不要用单引号,可能会出问题)。

(2)末尾无分号。

(3)不支持变量。

4、JSON数组与JavaScript数组的不同

(1)末尾无分号。

(2)不支持变量。

5、序列化

(1)JSON.stringify()方法

把JavaScript对象(JSON对象)序列化为JSON字符串的方法。默认情况下,输出的JSON字符串不包含任何空格字符或缩进,同时会忽略JavScript对象的函数和原型对象。

接收3个参数:过滤器、可选的过滤器(可以是函数,也可以是数组)、可选的字符串缩进数。

var person = {
  name: "Alice",
  age: 23,
  adult: true,
  friends: ["Bruce", "Cindy"]
};
var jsonText1 = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
var jsonText2 = JSON.stringify(person, ["name", "friends"]);//Date对象在序列化后变成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
  case "friends":
    return value.join("|");//按指定分隔符将数组连接成一个字符串
  case "age":
    return value + 1;
  case "adult":
    return undefined;//返回undefined则删除此属性
  default:
    return value;//其他值正常显示
  }
});
var jsonText4 = JSON.stringify(person, null, 4);
alert(jsonText1);//{"name":"Alice","age":23,"adult":true,"friends":["Bruce", "Cindy"]}
alert(jsonText2);//{"name":"Alice","friends":["Bruce", "Cindy"]}
alert(jsonText3);//{"name":"Alice","age":24,"friends":["Bruce|Cindy"]}
alert(jsonText4);
/*
{
  "name":"Alice",
  "age":23,
  "adult":true,
  "friends":[
    "Bruce",
    "Cindy"
  ]
}
*/

(2)toJSON()方法

作为stringify()方法中第2个参数过滤器的补充。stringify()有时不能满足某些对象进行自定义序列化的需求,则给对象定义toJSON()方法。

序列化对象的顺序:

  • 1)若存在toJSON()方法且能通过它取得有效的值,则调用这个方法。否则,返回对象本身。
  • 2)如果提供了第2个参数,应用此函数过滤器,传入函数过滤器的值是第1步返回的值。
  • 3)对第2步返回的每个值进行相应的序列化。
  • 4)如果提供了第3个参数,执行相应的格式化。
var person = {
  name: "Alice",
  age: 23,
  adult: true,
  friends: ["Bruce", "Cindy"],
  toJSON:function(){
    return {"name":"Alice","id":23,"friends":["Bruce", "Cindy"]};
  }
};
var jsonText1 = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
var jsonText2 = JSON.stringify(person, ["adult", "id", "friends"]);//Date对象在序列化后变成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
  case "friends":
    return value.join("|");//按指定分隔符将数组连接成一个字符串
  case "id":
    return value - 1;
  case "age":
    return value + 1;//返回undefined则删除此属性
  default:
    return value;//其他值正常显示
  }
});
var jsonText4 = JSON.stringify(person, null, 4);
alert(jsonText1);//{"name":"Alice", "id":23, "friends":["Bruce", "Cindy"]};
alert(jsonText2);//{"id":23,"friends":["Bruce", "Cindy"]}
alert(jsonText3);//{"name":"Alice","id":22,"friends":["Bruce|Cindy"]}
alert(jsonText4);
/*
{
  "name":"Alice",
  "id":23,
  "friends":[
    "Bruce",
    "Cindy"
  ]
}
*/

(3)eval()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第一种方法。

var JSText = eval('(' + '{"name":"Alice", "friends":["Bruce", "Cindy"]}' + ')');
alert(JSText.friends);//Bruce,Cindy

注意:eval方法只能在非严格模式中进行使用,在use strict中是不允许使用这个方法的。

(4)jQuery.parseJSON()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第二种方法。

需要先引入jQuery的js文件。

var JSText = jQuery.parseJSON('{"name":"Alice", "friends":["Bruce", "Cindy"]}');
alert(JSText.friends);//Bruce,Cindy

注意:从jQuery 3.0开始,不推荐使用jQuery.parseJSON()方法,要解析JSON字符串,请改用原生的JSON.parse()方法。

(5)JSON.parse()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第三种方法。

接收2个参数:JSON字符串和可选的函数(在每个键值对上调用)。

eg1:

var JSText1 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}');
var JSText2 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}', function(key, value) {
  if (key == "friends")
      return value.join("&");
    else
      return value;
});
alert(JSText1.friends);//Bruce,Cindy
alert(JSText2.friends);//Bruce&Cindy

注意:第一个参数是JSON字符串,因此JSON对象需要用引号引住。

eg2:

var person = {
  name: "Alice",
  age: 23,
  birthday: new Date(1993, 12, 6)//保存了一个Date对象
};
var jsonText = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
alert(jsonText);//{"name":"Alice","age":23,"birthday":"1994-01-05T16:00:00:000Z"}
var JSText = JSON.parse(jsonText, function(key, value) {//解析在JSText中还原了Date对象,则JSText.birthdat属性中会保存一个Date对象
  if (key == "birthday")
    return new Date(value);
  else
    return value;
});
alert(JSText.birthday.getFullYear());//1994,已是Date对象,可以调用getFullYear()
Javascript 相关文章推荐
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
JavaScript构造函数详解
Dec 27 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 #Javascript
JS实现自定义弹窗功能
Aug 08 #Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 #Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 #Javascript
JS的Ajax与后端交互数据的实例
Aug 08 #Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
You might like
文件系统基本操作类
2006/11/23 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python3多线程基础知识点
2019/02/19 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
专业实习自我鉴定
2013/10/29 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
小学教师听课制度
2014/02/01 职场文书
小学生寒假家长评语
2014/04/16 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
新学期开学标语2015
2015/07/16 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js