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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
理解JS事件循环
Jan 07 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
vue组件name的作用小结
May 23 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 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通过COM使用ADODB的简单例子
2006/12/31 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP简单日历实现方法
2016/07/20 PHP
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python中list初始化方法示例
2016/09/18 Python
python编程嵌套函数实例代码
2018/02/11 Python
基于python生成器封装的协程类
2019/03/20 Python
python不同系统中打开方法
2020/06/23 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
复兴之路展览观后感
2015/06/02 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
python中数组和列表的简单实例
2022/03/25 Python