JS标准库系列(七)—— JSON对象

一、JSON格式


  • JSON格式(JavaScript Object Notation)是一种用于数据交换的文本格式,2001年由 道格拉斯 克罗克福德(Douglas Crockford)提出,目的是取代繁琐笨重XML格式。

  • 相比XML格式,JSON格式有两个显著优点:书写简单,一目了然;符合JS原生语法,JS引擎可直接解析,不用另外添加解析代码。所以,JSON迅速被接受,已经成为各大网站交换数据的标准格式,并被写入ES5,成为了标准的一部分。

  • 每个JSON代表一个值,要么是简单类型的值,要么是复合类型的值,但是只能是一个值,不能是两个或更多的值。这就是说,每个JSON文档只能包含一个值。

  • JSON对值得类型和格式规定(牢记):

  • 复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。
  • 简单类型的值只有四种:字符串、数值(必须以十进制表示)、布尔值和null(不能使用NaN, Infinity, -Infinityundefined)。

  • 字符串必须使用双引号表示,不能使用单引号。

  • 对象的键名必须放在双引号里面。

  • 数组或对象最后一个成员的后面,不能加逗号。

  • ES5新增了JSON对象,用来处理JSON格式的数据,它有两个方法:JSON.stringify()JSON.parse()

二、JSON.stringify(),[将JS值序列化为JS字符串,该字符串内容要符合JSON格式]


用于将一个JS值序列化为一个字符串,这个JS字符串内容应该符合JSON格式,并且可以被JSON.parse()还原。

2.1、修改MDN上对这个概念的翻译:

原翻译并不是很直观,容易让初学者产生误解。


修订MDN上的内容
2.2、示例:
JSON.stringify('abc') // ""abc""  JS字符串里面的"abc"是符合JSON格式的字符串
JSON.stringify(1) // "1"  JS字符串里面的1是符合JSON格式的数值
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"
JSON.stringify([1, "false", false]) // '[1,"false",false]'
JSON.stringify({ name: "张三" }) // '{"name":"张三"}'

上面代码将各种类型的值,转成JSON字符串。需要注意的是,对于原始类型的字符串,转换结果会带双引号,即字符串abc会被转成"abc",这是因为将来还原的时候,双引号可以让JS引擎知道,abc是一个字符串,而不是一个变量名。

如果原始对象中,有一个成员是undefined、函数或XML对象,这个成员会被省略。如果数组的成员是undefined、函数或XML对象,则这些值被转成null

JSON.stringify({
  f: function(){},
  a: [ function(){}, undefined ]
});
// "{"a": [null,null]}"

上面代码中,原始对象的f属性是一个函数,JSON.stringify方法返回的字符串会将这个属性省略。而a属性是一个空数组,成员分别是函数和undefined,它们都被转成了null

正则对象会被转成空对象。

JSON.stringify(/foo/) // "{}"

JSON.stringify方法会忽略对象的不可遍历属性。

var obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});

JSON.stringify(obj); // {"foo":1}

上面代码中,barobj对象的不可遍历属性,JSON.stringify方法会忽略这个属性。

2.3、第二个参数
2.3.1、JSON.stringify方法可以接受一个数组,作为第二个参数,指定需要转成字符串的属性。
var obj = { 
    prop1: 'value1', 
    prop2: 'value2', 
    prop3: 'value3'
};
var selectedProperties = ['prop1', 'prop2'];
JSON.stringify(obj, selectedProperties);

上面代码中,JSON.stringify方法得第二个参数指定,只转prop1prop2两个属性。

指定要被序列化的属性名

如果要序列化的是一个数组,那第二个参数就无效:

JSON.stringify(["a", "b"], ['0']);
JSON.stringify({a: "huahua", b: 23}, ['0']);
只能对属性有效
2.3.2、第二个参数还可以是一个函数,用来更改JSON.stringify的默认行为。
function f(key, value) { 
    if (typeof value === "number") { 
        value = 2 * value; 
    } 
    return value;
}
JSON.stringify({ a: 1, b: 2 }, f);
// '{"a": 2,"b": 4}'

上面代码中的f函数,接受两个参数,分别是被转换的对象的键名和键值。如果键值是数值,就将它乘以2,否则就原样返回。

2.4、第三个参数
  • 默认情况下该方法输出的字符串不包含任何空格字符或缩进,所以有了第三个可选的参数。

  • 这个参数用于增加返回的JSON语法的字符串的可读性。如果是数字,表示每个属性前面添加的空格(最多不超过10个);如果是字符串(不超过10个字符),则该字符串会添加在每行前面。

JSON.stringify({ p1: 1, p2: 2 }, null, 2);
/*
"{ 
  "p1": 1, 
  "p2": 2
}"
*/
JSON.stringify({ p1:1, p2:2 }, null, '|-');
/*
"{
|-"p1": 1,
|-"p2": 2
}"
*/
2.5、toJSON方法

如果JSON.stringify的参数对象有自定义的toJSON方法,那么JSON.stringify会使用这个方法的返回值作为参数,而忽略原对象的其他属性。

三、JSON.parse(),[将字符串变成值]


将一个符合JSON语法的字符串(注意理解,不是JSON字符串)解析成一个对应类型的值或对象。

3.1、MDN中对这个方法的翻译做了修改,如下:
  • 原来的翻译:


    原来的翻译
  • 修改后的翻译:


    修改后的翻译
3.2、示例:
JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse(' "foo" '); // "foo"  注意理解,"foo"是一个JSON字符串,'"foo"'是符合JSON语法的字符串
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null

如果传入的字符串不是有效的JSON格式,JSON.parse方法将报错。

JSON.parse("'String'") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL

上面代码中,双引号字符串中是一个单引号字符串,因为单引号字符串不符合JSON格式,所以报错。

JSON.parse方法可以接受一个处理函数,用法与JSON.stringify方法类似。

(本系列完结)

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

推荐阅读更多精彩内容

  • 参考基础教程的整理,方便记忆 一、Object对象 (O大写) 所有其他对象都继承自这个对象。Object本身也是...
    Viaphlyn阅读 2,250评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,099评论 18 139
  • 一棵树倒了 倒地的声音很大 响声传得好远好远 惊动了周边的所有飞禽走兽 一棵树倒了 树杈上的鸟窝碎了 茅草散落一地...
    瓶水之冰阅读 183评论 1 3
  • JDK 版本: 1.8.0_45 常量 DEFAULT_INITIAL_CAPACITY = 16; 默认容器大小...
    binwin20阅读 222评论 0 0