JS高程笔记 —— JSON

引言

曾经有一段时间，XML是互联网上传输结构化数据的事实标准。Web服务的第一次浪潮很大程度上都是建立在XML之上的，突出的特点是服务器与服务器间通信。然而，业界一直不乏质疑XML的声音。不少人认为XML过于烦琐、冗长。为解决这个问题，也涌现了一些方案。不过，Web的发展方向已经改变了。

JSON是JavaScript的一个严格的子集，利用了JavaScript中的一些模式来表示结构化数据，它是一种数据格式，不是编程语言！
虽然 具有相同的语法形式，但JSON并不从属于JavaScript，而且，并不是只有JavaScript才能使用JSON，毕竟JSON只是一种数据格式。很多编程语言都有针对JSON的解析器和序列化器。

语法

JSON的语法可以表示以下三种类型的值。

  • 简单值

    使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JavaScript中的特殊值undefined。

  • 对象

    对象作为一种复杂数据类型，表示的是一组无序的键值对（key-value）。而每个键值对中的值可以是简单值，也可以是复杂类型的值。

  • 数组

    数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单之、对象和数组。

JSON不支持变量、函数或者对象实例，它就是一种表示结构化数据的格式，虽然与JavaScript中表示数据的某些语法相同，但它并不局限于JavaScript范畴。

简单值

最简单的JSON数据形式就是简单值。例如，下面这个值是有效的JSON数据：

5

这是JSON表示数值5的方式。类似地，下面是JSON表示字符串的方式：

"hello world!"
JavaScript字符串与JSON字符串最大区别在于：JSON字符串必须使用双引号（单引号导致语法错误）。

布尔值和null也是有效的JSON形式。但是，在实际应用中，JSON更多地用来表示更复杂的数据结构，而简单值只是整个数据结构中一部分。

对象

JSON中的对象与JavaScript字面量稍微有些不同，下面是一个JavaScript中的对象字面量：

var person = {
    name:"Nicholas",
    age:29
}

这是JavaScript创建对象字面量的标准方式，但JSON中的对象要求给属性加引号。JSON表示上述对象方式如下：

{
    "name":"Nicholas",
    "age":29
}

与JavaScript的对象字面量相比，JSON对象有两个地方不同：

  • 没有声明变量（JSON中没有变量的概念）。

  • 没有末尾分号（因为不是JavaScript语句，所以没有分号）

但是！对象的属性必须有双引号！这在JSON中是必须的。
属性值可以是简单值，也可以是复杂类型值，因此可以这样：

{
    "name": "Nicholas",
    "age": 29,
    "school": {
        "name": "Merrimack College",
        "location": "North Andover, MA>"
    }
}

这个例子在顶级对象中嵌入了学校（"school"）信息。虽然有两个name属性，但由于它们分别属于不同对象，因此这样完全没有问题。不过，同一对象下绝对不应该出现两个同名属性。
与JavaScript不同，JSON中对象的属性名任何时候都必须加双引号。手工编写JSON时，忘了给对象属性名加双引号或者把双引号写成单引号都是常见的错误。

数组

JSON中的第二种复杂数据类型是数组。。JSON数组采用的就是JavaScript中的数组字面量形式。
JavaScript中的数组字面量：

var values = [25,"Hi",true];

JSON中：

[25,"Hi",true]
对的，就是没有了变量和分号的概念，其他和JavaScript是类似的。

把数组和对象结合起来，可以构成更复杂的数据集合：

[
    {
        "title":"Professional JavaScript",
        "authors":[
            "Nicholas C. zakas"
        ],
        "editons":3,
        "year":2011
    },
    {
        "title":"Professional JavaScript",
        "authors":[
            "Nicholas C. zakas"
        ],
        "editons":2,
        "year":2009
    },
    {
        "title":"Professional Ajax",
        "authors":[
            "Nicholas C. zakas",
            "JereMy Mcpeak",
            "Joe Fawcett"
        ],
        "editons":2,
        "year":2008
    },
    {
        "title":"Professional Ajax",
        "authors":[
            "Nicholas C. zakas",
            "JereMy Mcpeak",
            "Joe Fawcett"
        ],
        "editons":1,
        "year":2007
    },
    {
        "title":"Professional Javascript",
        "authors":[
            "Nicholas C. zakas"
        ],
        "editons":1,
        "year":2006
    }
]

这个数组中包含一些图书的对象。每个对象都有几个属性，其中一个属性是"authors"，这个属性的值又是一个数组。对象和数组通常是JSON数据结构的最外层形式(当然这不是强制规定的)，利用它们可以创造出各种各样的数据结构。

解析与序列化（重）

JSON之所以流行，拥有与JavaScript类似的语法并不是全部原因。更重要的一个原因是，可以把JSON数据结构解析为有用的JavaScript对象。与XML数据结构要解析成DOM文档而且从中提取数据极为麻烦相比，JSON可以解析为JavaScript对象的优势极其明显。就以上一节中包含一组图书的JSON数据结构为例，在解析为JavaScript对象后，只需要下面一行简单的代码就可以取得第三本书的书名：

book[2].title

当然，这是是假设解析JSON数据结构后得到的对象保存到了变量books中。再看看下面在DOM结构中查找数据的代码：

doc.getElementsByTagName("book")[2].getAttribute("title")

看看这些多余的方法调用，就不难理解为什么JSON能得到JavaScript开发人员的欢迎了。从此以后，JSON就成为WEB服务开发中交换数据的事实标准。

JSON对象

早期的JSON解析器基本上就是使用JavaScript的eval()函数。由于JSON是JavaScript语法的子集，因此eval()可以解析、解释并返回JavaScript对象和数组。ES5对解析JSON的行为进行规范，定义了全局对象JSON。支持这个对象的浏览器有IE8+、Firefox3.5+、Safari4+、Chrome和Opera 10.5+。

JSON对象有两个方法：stringify()和parse()。在最简单的情况下，这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值。例如：

var book = {
    title: "Professional Javascript",
    authors: [
        "Nicholas C. Zakas"
    ],
    eidtion: 3,
    year: 2011
};

var jsonText = JSON.stringify(book);
console.log(jsonText);

这个例子使用JSON.stringify()把一个JavaScript对象序列化为一个JSON字符串，然后将它保存在jsonText中。默认情况下，JSON.stringify()输出的JSON字符串不包含任何任何空格字符或缩进，因此保存在jsonText中的字符串如下：

{"title":"Professional Javascript","authors":["Nicholas C. Zakas"],"eidtion":3,"year":2011}

在序列化JavaScript对象时，所有函数及原型成员都会有意被忽略，不体现在结果中。此外，值为undefined的任何属性也都会跳过。结果中最终都是值为有效JSON数据类型的实例属性。
将JSON字符串直接传递给JSON.parse()就可以得到相应的JavaScript值。使用下列代码就可以创建与类似book类似的对象：

var bookCopy = JSON.parse(jsonText);
console.log(bookCopy["edition"]);   // 3

注意，虽然book与bookCopy具有相同的属性，但它们是两个独立的、没有任何关系的对象。
如果传给JSON.parse()的字符串不是有效的JSON，该方法会抛出错误。

序列化选项

实际上，JSON.stringify()除了要序列化JavaScript对象外，还可以接收另外两个参数，这两个参数用于指定以不同的方式序列化JavaScript对象。第一个参数是个过滤器，可以是一个数组，也可以是一个函数；第二个参数是一个选项，表示是否在JSON字符串中保留缩进。单独或组合使用这两个参数，可以更全面深入地控制JSON的序列化。

1. 过滤结果

如果过滤器参数是数组，那么JSON.stringify()的结果中将只包含数组中列出的属性。来看下面的例子。

var book = {
    "title":"Professional Javascript",
    "authors":[
        "Nicholas C. Zakas"
    ],
    edition:3,
    year:2011
};

var jsonText = JSON.stringify(book,["title","edition"]);
console.log(jsonText);    // {"title":"Professional Javascript","edition":3}

JSON.stringify()的第二个参数是一个数组，其中包含两个字符串："title"和"edition"。这两个属性与将要序列化的对象中的属性是对应的，因此在返回的结果字符串中，就只会包含这两个属性：

 {"title":"Professional Javascript","edition":3}

如果第二个参数是函数，行为会稍有不同。传入的函数接收两个参数，属性名和属性值。根据属性名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串，而在值不是键值对结构的情况下，键名可以是空字符串。
为了改变序列化对象的结果，函数返回的值就是相应键的值。不过要注意，如果函数返回了undefined，那么相应的属性会被忽略。还是看一个例子吧。

var book = {
    "title":"Professional Javascript",
    "authors":[
        "Nicholas C. Zakas"
    ],
    edition:3,
    year:2011
};

var jsonText = JSON.stringify(book,function(key,value) {
    switch (key) {
        case "authors":
            return value.join(",")
        
        case "year":
            return 5000;
        
        case "edition":
            return undefined;
        
        default:
            return value;
    }
});

这里，函数过滤器根据传入的键来决定结果。如果键为"authors"，就将数组连接为一个字符串；如果键为"year"，则将其值设置为5000；如果键为"edition"，通过返回undefined删除该属性。最后，一定要提供default项，此时返回传入的值，以便其他值都能正常出现在结果中。
实际上，第一次调用函数过滤器，传入的键是一个空字符串，而值就是book对象。序列化后的JSON字符串付下所示：

{"title":"Professional Javascript","authors":"Nicholas C. Zakas","year":5000}

要序列化的对象中的每一个对象都要经过过滤器，因此数组中的每个带有这些属性的对象经过过滤器之后，每个对象都只包含"title"、"authors"和"year"属性。

2. 字符串缩进

JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。如果这个参数是一个数值，那它表示的是每个级别缩进的空格数。例如：要在每个级别缩进4个空格，可以这样：

var book = {
    "title": "Professional Javascript",
    "authors": [
        "Nicholas C. Zakas"
    ],
    edition: 3,
    year: 2011
}

var jsonText = JSON.stringify(book, null, 4);

/*
jsonText

{
fuck.js:11
    "title": "Professional Javascript",
    "authors": [
        "Nicholas C. Zakas"
    ],
    "edition": 3,
    "year": 2011
}

*/

不知道读者注意到没有，JSON.stringify()也在结果字符串中插入了换行符以提高可读性。只要传入有效的控制缩进的参数值，结果字符串就会包含换行符。（只缩进而不换行意义不大）最大缩进空格数为10，所有大于10的值都会自动转换为10。
如果缩进参数是一个字符串而非数值，则这个字符串将在JSON字符串中被用作缩进字符（不在使用空格）。在使用字符串的情况下，可以将缩进字符设置为制表符，或者两个短划线之类的任意字符。
var jsonText = JSON.stringify(book,null," - -")；

这样，jsonText中的字符串将变成如下所示：

var book = {
    "title": "Professional Javascript",
    "authors": [
        "Nicholas C. Zakas"
    ],
    edition: 3,
    year: 2011
}

var jsonText = JSON.stringify(book,null," - -");
console.log(jsonText);

/*

{
fuck.js:11
 - -"title": "Professional Javascript",
 - -"authors": [
 - - - -"Nicholas C. Zakas"
 - -],
 - -"edition": 3,
 - -"year": 2011
}

*/

缩进字符串最长不能超过10个字符长。如果字符串长度超过了10个，结果中将只出现前10个字符。

3. toJSON()方法

有时候，JSON.stringify()还是不能满足对某些对象进行自定义序列化的需求。在这些情况下，可以给对象定义toJSON()方法，返回其自身的JSON数据格式。原生Date对象有一个toJSON()方法，能够将JavaScript的Date对象自动转换成ISO 8601日期字符串(与在Date对象上调用toISOString()的结果一样)。
可以为任何对象添加toJSON()方法，如：

var book = {
    "title": "Professional Javascript",
    "authors": [
        "Nicholas C. Zakas"
    ],
    edition: 3,
    year: 2011,
    toJSON:function() {
        return this.title;
    }
};

var jsonText = JSON.stringify(book);
console.log(jsonText);
// "Professional Javascript"

以上代码在book对象上定义了一个toJSON()对象，该方法放回图书的书名。与Date对象类似，这个对象也将被序列化为一个简单的字符串而非对象。可以让toJSON()方法返回任何值，它都能正常工作。比如，可以让这个方法返回undefined，此时如果包含它的对象嵌入在另一个对象中，会导致它的值变成null，而如果它是顶级对象，结果就是undefined。

toJSON()可以作为函数过滤器的补充，因此理解序列化的内部顺序十分重要。假设把一个对象传入JSON.stringify()，序列化该对象的顺序如下：

  1. 如果存在toJSON()方法而且能通过它取得有效的值，则调用该方法。否则返回对象本身。
  2. 如果提供了第二个参数，应用这个函数过滤器。传入函数过滤器的值是第一步返回的值。
  3. 对第二步返回的值进行相应的序列化。
  4. 如果提供了第三个参数，执行相应的格式化。

无论是考虑定义toJSON()的方法，还是考虑使用函数过滤器，亦或需要同时使用两者，理解这个顺序都是至关重要的。

解析选项

JSON.parse()方法也可以接收另一个参数，该参数是一个函数，将在每个键值对上调用。为了区别JSON.stringify()接收的替换（过滤）函数（replacer），这个函数被称为还原函数(reviver)，但实际上这两个函数的签名是相同的——它们都接收两个参数，一个键和一个值，而且都需要返回一个值。

如果还原函数返回undefined，则表示要从结果中删除相应的键；如果返回其他值，则将该值插入到结果中。在将日期字符串转换为Date对象时，经常要用到还原函数。例如：

var book = {
    "title": "Professional Javascript",
    "authors": [
        "Nicholas C. Zakas"
    ],
    edition: 3,
    year: 2011,
    releaseDate: new Date(2011, 11, 1)
};

var jsonText = JSON.stringify(book);

var bookCopy = JSON.parse(jsonText, function (key, value) {
    if (key === "releaseDate") {
        return new Date(value);
    } else {
        return value;
    }
})

console.log(bookCopy.releaseDate.getFullYear());

以上代码先是为book对象新增了一个releaseDate属性，该属性保存着一个Date对象。这个对象经过序列化之后变成有效的JSON字符串，然后经过解析又在bookCopy中还原为一个Date对象。还原函数在遇到releaseDate键时，会基于相应的值创建一个新的Date对象。结果就是bookCopy.releaseDate属性中会保存一个Date对象 。正因为如此，才能基于这个对象调用getFullYear()方法。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342

推荐阅读更多精彩内容

  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 4,114评论 0赞 13
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0赞 4
  • 卜算子•无患子树下
    黄花满地残。落寞同谁语。一夜雷霆浮香尽。点点共星星。 蜂去蝴蝶飞。微醺引人醉。雨后初阳殷勤献。风吹万物生。
    我是蒙牛001阅读 253评论 0赞 1
  • 同事，你怎么也来暗算我啊
    “ 李总，今年的优秀名单定下来了吗？我已经向总经理申请了。去年我也申请了，当时余副总答应了给我一个优秀的，但是后来...
    珍珠相思阅读 336评论 0赞 0
  • 写给小朋友
    Max： 今天是你去姥姥家的第五天，还记得和你商量这件事情的时候，前一秒你还因为玉米手舞足蹈，后一秒我说完你就低...
    豌豆夫人Olia阅读 180评论 1赞 2