JavaScript常见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代码检验、检验、美化、格式化工具：

json在线格式化工具：

在线xml/json互相转换工具：

json代码在线格式化/美化/压缩/编辑/转换工具：

在线json压缩/转义工具：

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

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