JavaScript常见JSON操作实例分析

更新时间：2018年08月08日 10:21:04 作者：筱葭

这篇文章主要介绍了JavaScript常见JSON操作,简单描述了json的概念、常见json类型,并结合实例形式分析了json的序列化、转换、格式化、解析等相关操作技巧,需要的朋友可以参考下

本文实例讲述了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()

PS：这里再为大家推荐几款相关的json在线工具供大家参考：

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

前台js改变Session的值(用ajax实现)
前台js改变Session的值,有很多的新手朋友对此问题会很陌生，本文将提供解决方法，需要了解的朋友可以参考下
2012-12-12
JS 音频可视化插件Wavesurfer.js的使用教程
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法，感兴趣的朋友跟随小编一起看看吧
2018-10-10
Active控件问题小结(附解决办法)
这篇文章主要介绍了Active控件问题小结(附解决办法)的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
Peer.js 构建视频聊天应用使用详解
这篇文章主要为大家介绍了Peer.js 构建视频聊天应用使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
JavaScript将数组转换为链表的方法
这篇文章主要介绍了JavaScript将数组转换为链表的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
14 个折磨人的 JavaScript 面试题
这篇文章主要为大家详细介绍了14 个折磨人的 JavaScript 面试题，希望对大家有所帮助，感兴趣的小伙伴们可以参考一下
2016-08-08
原生JS实现前端本地文件上传
这篇文章主要为大家详细介绍了原生JS实现前端本地文件上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-09-09
JS算法题之查找数字在数组中的索引位置
这篇文章主要给大家介绍了关于JS算法题之查找数字在数组中的索引位置的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
js实现日历的简单算法
这篇文章主要为大家详细介绍了js实现日历的简单算法，用js写了一套日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
使用JS在浏览器中判断当前网络连接状态的几种方法
本篇文章主要介绍了使用JS在浏览器中判断当前网络状态的几种方法，非常具有实用价值，需要的朋友可以参考下
2017-05-05

JavaScript常见JSON操作实例分析

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具