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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
深入浅析vue中cross-env的使用
Sep 12 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
php简单的会话类代码
2011/08/08 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
AngularJS语法详解
2015/01/23 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
Django 外键的使用方法详解
2019/07/19 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
年终考核评语
2014/01/19 职场文书
图书室标语
2014/06/21 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
音乐教师个人总结
2015/02/06 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android