Javascript JSON

JSON只是一种字符串数据格式,使用它的不仅仅是Javascript。

语法

JSON可以表示三种类型的值:简单值、对象、数组

简单值

以下是JSON可以辨识的简单值例子:

5
"Hello World!"
false
null

*注意:

  1. undefined不被支持
  2. 字符串必须使用双引号,单引号会导致语法错误

对象

在Javascript中,我们可以用对象字面量的方式创建一个对象:

var person = {
    name: "Sue",
    age:  "18"
}

但JSON要求给属性加双引号,上述对象转换成合法的JSON字符串格式:

{
    "name": "Sue",
    "age":  "18"
}

*注意:

  1. 属性加双引号
  2. 没有变量声明
  3. 没有末尾分号
  4. 属性的值可以是前面介绍的简单值,也可以是对象或数组
  5. 2、3点同样适用于简单值和数组

数组

在Javascript中,我们可以创建一个如下数组:

var names = ["Sue", "Jane", "Ben"]

上述数组转换成合法的JSON字符串格式:

["Sue", "Jane", "Ben"]

我们可以将数组、简单值、对象嵌套使用,创建更加复杂的JSON字符串,比如:

{
    "teachers": [
        { "name": "Sue", "age": 18, "students": [1, 45, 60]},
        { "name": "Ben", "age": 25, "students": [2, 31, 40]}
    ],
    "students": [
        { "id": 1, "name": "Jane"},
        { "id": 2, "name": "Lee"}
    ]
}

解析与序列化

在JSON之前,web传输格式化数据都是使用XML,Javascript要想拿到XML中的数据,要先将其转换成DOM,而后从中提取数据,相比之下,JSON就显得非常简单。

eval

早期解析JSON一般使用eval(),比如:

eval({"name": "Sue"})
{name: "Sue"}

但这种方式存在风险,因为服务器返回的数据很有可能存在恶意代码,只要被解析成合法的Javascript语法,就会被执行,比如:

eval("alert('Sue')")

因此不建议使用eval()来解析JSON字符串。
早期浏览器中,可以使用https://github.com/douglascrockford/JSON-js来解析JSON字符串。

JSON对象

在IE 8+、 Firefox 3.5+、 Safari 4+、 Chrome、Opera 10.5+中,ECMAScript定义了全局对象JSON。

stringify

用于把Javascript对象序列化为JSON字符串。
*注意:

  1. 值为undefined的属性会被忽略
  2. 函数及原型成员会被忽略
  3. 不包含缩进和空格字符(比如逗号后的空格)

举个例子:

function Person(name, secret) {
    this.name = name;
    this.secret = secret;
    this.makeFriends = function() {
        return this.secret;
    }
}
Person.prototype.sayHi = function() {
    return this.name;
}
var me = new Person("Sue", undefined)
me.makeFriends()
// undefined
me.sayHi()
// "Sue"
var meJSON = JSON.stringify(me);
// "{"name":"Sue"}"

上述例子中,我们创建了一个Person实例me,其中secret属性为undefined,包含makeFriends方法和一个原型成员sayHi,这些都没有被添加到生成的JSON字符串中。
这个方法可以使我们不必在乎Javascript语法与JSON语法的差异,尽管创建合法的Javascript对象。

parse

用于把JSON字符串序列化为Javascript值。

var meCopy = JSON.parse(meJSON)
// {name: "Sue"}

*注意:memeCopy是两个独立的对象,实际编程中,可以使用stringify parse实现对象的拷贝。

stringify 选项

JSON.stringify()的第一个参数是要序列化的对象,后面还可以加两个参数,分别是过滤器和选项。

  1. 过滤器
    过滤器可以是数组,也可以是函数,如果是数组,JSON.stringify()的结果中将保留数组中的属性,比如:
function Person(name, age, secret) {
    this.name = name;
    this.age = age;
    this.secret = secret;
}
var me = new Person("Sue", 18, "none");
var meJSON = JSON.stringify(me, ["name", "age"])
meJSON
// "{"name":"Sue","age":18}"

如果过滤器是一个函数,会给这个函数传入两个参数,分别是属性名和属性值,根据需要返回要添加到JSON中的属性值,如果为undefined,会移除该属性,比如:

var me = new Person("sue", 25, ["girl", "1024", "Beauty"])
function process(key, value) {
    switch(key) {
        case "name":
            return value.charAt(0).toUpperCase() + value.slice(1);
        case "age":
            return 18;
        case "secret":
            return undefined;
        default:
            return value;
    }
}
var meJSON = JSON.stringify(me, process)
meJSON
// "{"name":"Sue","age":18}"
  1. 字符串缩进
    第三个参数用于控制结果中的缩进和空白符,如果这个参数是一个数值,那么它表示每个级别缩进的空格数,比如:
var meJSON = JSON.stringify(me, process, 4)
undefined
meJSON
"{
    "name": "Sue",
    "age": 18
}"

*注意:

  1. 只要传入了缩进数,结果就会包含换行符,因为只缩进却不换行没什么意义。
  2. 最大缩进为10,如果超过10, 转换为10

如果第三个参数是一个字符串,那么将使用这个字符串作为缩进,这个字符串可以是制表符或其他任意字符,如果超过10位,则仅前10位有效,比如:

var meJSON = JSON.stringify(me, process, "\t")
meJSON
"{
    "name": "Sue",
    "age": 18
}"
var meJSON = JSON.stringify(me, process, "****")
meJSON
"{
****"name": "Sue",
****"age": 18
}"
  1. toJSON
    当需要为某种对象添加自定义的序列化方法时,可以给对象定义toJSON()方法,比如:
Person.prototype.toJSON = function() {
    return this.name;
}
var me = new Person("sue", 25, ["girl", "1024", "Beauty"])
JSON.stringify(me, process, "\t")
// ""sue""

上述例子中,我们在Person的原型中添加了toJSON方法,发现调用JSON.stringify时,只序列化了name属性。
序列化的内部顺序如下:
No. 1 如果存在toJSON(),而且它能返回有效的值,则调用它,否则,返回对象本身
No. 2 如果提供了过滤器参数,则基于第一步返回的值调用过滤器
No. 3 序列化第二步的返回值
No. 4 如果提供了缩进,则格式化第三步的返回值

parse 选项

JSON.parse()可以接收第二个参数,这个参数是一个还原函数,将在每个键值对上调用,这个函数接收两个参数,分别是键和值,返回处理过的值,比如:

var birth = new Date(1993, 10, 24)
JSON.stringify(birth)
// ""1993-11-23T16:00:00.000Z""
var birthJSON = JSON.stringify(birth)
var birthCopy = JSON.parse(birthJSON, function(key, value) {
    return new Date(value)
})
birthCopy.getFullYear()
// 1993
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 1、语法 JSON 的语法可以表示以下三种类型的值。(1)简单值:使用与JavaScript相同的语法,可以在JS...
    shanruopeng阅读 240评论 0 2
  • 一、语法 JSON 的语法可以表示以下三种类型的值。 简单值:使用与JavaScript 相同的语法,可以在JSO...
    Tom36阅读 205评论 0 0
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,045评论 0 13
  • 我们的故事不算美丽,却如此令人难以忘记…… 高中,我们在最美的年纪相遇。那时的我们或许还不知道什么叫爱,懵懂而...
    李友辉阅读 571评论 0 7
  • 比时代快一半,你就会很幸福;与时代的节奏相同,你只能庸庸碌碌;比时代快一步,那你可能就会痛苦’。等你快了一步,可能...
    赵春华阅读 171评论 0 0