5分钟了解JSON那些事儿

JSON简介JSON是JavaScript Object Notation(JavaScript对象表示法)的缩写JSON是一种数据格式, 而不是一种编程语言, 用来表示结构化数据JSON是JavaScript的一个严格子集JSON并不从属于JavaScript, 很多编程语言都可以用JSON数据格式语法JSON语法可以表示以下三种类型的值:简单值: 字符串/数值/布尔值/null, 但是不支持undefined对象数组JSON不支持变量/函数/对象实例简单值字符串"Hello JSON"数字66布尔值truenullnull对象和JavaScript对比来看 ->JavaScript表示对象键值对的键可以加引号也可以不加, 如果加引号, 可以加单引号也可以加双引号// 最常见就这么写const obj1 = { foo: ‘bar’, num: 66, status: true};// 这么写也oconstet obj2 = { ‘foo’: ‘bar’, ’num’: 66, ‘status’: true};// 这么写也okconst obj1 = { “foo”: “bar”, “num”: 66, “status”: true};JSON表示对象键值对的键必须加双引号(手写JSON时一定要注意)对象没有变量声明, 因为JSON根本就没有变量的概念(它不是一个编程语言)末尾没有分号{ “foo”: “bar”, “num”: 66, “status”: true}和JavaScript相似, 对象可以嵌套对象{ “foo”: “bar”, “num”: 66, “status”: true, “baz”: { “num”: 88 }}注, 同名属性可以在不同的对象中, 但是不能出现在同一个对象中数组和JavaScript对比来看 ->JavaScript表示数组let arr = [‘hello’, 66, true];JSON表示数组同样没有变量声明和结尾的分号, 同时注意字符串简单值要加双引号[“hello”, 66, true]数组和对象结合起来可以构成复杂的集合, 比如students.json文件中可能是这样婶儿的[ { “name”: “小明”, “age”: 10, “score”: { “math”: 88, “english”: 99 } }, { “name”: “小强”, “age”: 11, “score”: { “math”: 98, “english”: 96 } }]看到以上同JavaScript的不同之处, 我们可以知道为什么说JSON是JavaScript的一个严格子集了吧JSON序列化与解析基本用法ECMAScript5定义了全局对象JSON, 用来解析JSON字符串简单来说, JSON对象有两个方法JSON.stringify(): 把JavaScript对象序列化为JSON字符串JSON.parse(): 把JSON字符串解析为原生JavaScript值const book = { name: ‘Learn JavaScript in One Day’, pages: 1};const jsonText = JSON.stringify(book); // 序列化// “{“name”:“Learn JavaScript in One Day”,“pages”:1}“const parseText = JSON.parse(jsonText); // 解析// {name: “Learn JavaScript in One Day”, pages: 1}默认情况下, JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进(是不是给我们提供了一种将去除数据中无用的空白和缩进的方法呢).在序列化JavaScript对象时, 所有函数及原型成员都会被有意忽略, 不体现在结果中. 此外, 值为undefined的任何属性也都会被跳过. 结果中最终都是值为有效JSON数据类型的实例属性.const book = { name: ‘Learn JavaScript in One Day’, pages: 1, foo: undefined};const jsonText = JSON.stringify(book); // 序列化// “{“name”:“Learn JavaScript in One Day”,“pages”:1}”// foo的值为undefined, 所被忽略掉了将JSON字符串直接传递给JSON.parse()就可以得到相应的JavaScript值.JSON.parse()就是JSON.stringify()的逆向操作. 将一个JavaScript值序列化之后再解析JSON.parse(JSON.stringify(foo))和原来的foo几乎一样.注意, 为什么说是几乎一样呢?如果foo是一个对象或数组, 那么这么一折腾就变成了两个不同的对象或数组了;这就提供了一种克隆对象和数组的方法????如果foo是一个对象, 并且foo中有值为undefined的属性, 那么在序列化的过程中它会被筛掉;如果foo是一个数组, 并且其中有undefined的项, 那么在序列化过程中undefined的项会变成null;如果foo是一个简单值(数字/布尔值/字符串), 那么这么一折腾结果完全是相等的.const foo1 = { a: 1 };JSON.parse(JSON.stringify(foo1)) === foo1; // falseconst foo2 = [1, 2];JSON.parse(JSON.stringify(foo2)) === foo2; // falseconst foo3 = { a: 1, b: undefined };JSON.parse(JSON.stringify(foo3)); // {a: 1}const foo4 = [1, true, undefined];JSON.parse(JSON.stringify(foo4)); // [1, true, null]const foo5 = true;JSON.parse(JSON.stringify(foo5)) === foo5; // true如果传给JSON.parse()的字符串不是有效的JSON, 该方法会抛出错误.进阶用法序列化选项JSON.stringify()除了要序列化的JavaScript对象外, 还可以接收另外两个参数, 这两个参数用于指定以不同的方式序列化JavaScript对象.第一个参数是个过滤器, 可以是一个数组, 也可以是一个函数;第二个参数是一个选项, 表示是否在JSON字符串中保留缩进.1.过滤结果如果过滤器参数是数组, 那么JSON.stringify()的结果中将只包含数组中列出的属性const book = { name: ‘Learn JavaScript in One Day’, pages: 1};JSON.stringify(book, [’name’]);// “{“name”:“Learn JavaScript in One Day”}“再看下面的例子????:const stu = { name: “小明”, age: 10, score: { math: 88, english: 99 }};JSON.stringify(stu, [’name’, ‘score’]);// “{“name”:“小明”,“score”:{}}“注意, 最后结果中score是一个空对象, 那么小明的成绩哪儿去了?好像我们的目的是要显示name和score属性, 只去掉age就行了, 但是score对象中咋啥也没有了?那我们把stu对象重新改改试试:var stu = { name: “小明”, age: 10, score: { math: 88, english: 99, name: ‘xiuxiu~’, score: 100 }};JSON.stringify(stu, [’name’, ‘score’]);// “{“name”:“小明”,“score”:{“name”:“xiuxiu~”,“score”:100}}“这下看明白了么, 原来这个过滤是对每一层级的对象都过滤一遍.如果第二个参数是函数, 行为会稍有不同. 传入的函数接收两个参数, 属性名(键)和属性值(值). 根据属性名可以知道应该如何处理要序列化的对象中的属性. 属性名只能是字符串, 而在值并非键值对儿结构的值时, 键名可以是空字符串. 函数返回的值就是相应键的值, 如果函数返回了undefined, 那么相应的属性会被忽略.const stu = { name: “小明”, age: 10, score: { math: 88, english: 99 }};const newStu = JSON.stringify(stu, (key, value) => { switch(key) { case ‘math’: return 100; case ’english’: return 100; default: return value; }});// “{“name”:“小明”,“age”:10,“score”:{“math”:100,“english”:100}}”// 成功将小明的成绩改成了100分, 哈哈哈~2.字符串缩进JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符. 如果这个参数是一个数值, 那它表示的是每个级别缩进的空格数.JSON.stringify()会在结果字符串中插入换行符以提高可读性.最大缩进空格数为10, 所有大于10的值都会自动转换为10.const stu = { name: “小明”, age: 10, score: { math: 88, english: 99 }};JSON.stringify(stu, null, 4); // 4个空格的缩进/* 序列化后的结果”{ “name”: “小明”, “age”: 10, “score”: { “math”: 88, “english”: 99 }}”/如果缩进参数是一个字符串而非数值, 则这个字符串将在JSON字符串中被用作缩进字符(不再使用空格).缩进字符串最长不能超过10个字符长. 如果字符串长度超过了10个, 结果中将只出现前10个字符.JSON.stringify(stu, null, ‘–’);/ 序列化后的结果”{–“name”: “小明”,–“age”: 10,–“score”: {—-“math”: 88,—-“english”: 99–}}”/3.toJSON有时候, JSON.stringify()还是不能满足对某些对象进行自定义序列化的需求. 在这些情况下, 可以给对象定义toJSON()方法, 返回其自身的JSON数据格式. 原生Date对象有一个toJSON()方法,能够将JavaScript的Date对象自动转换成ISO8601日期字符串(与在Date对象上调用toISOString()的结果完全一样).JSON.stringify(new Date());// 序列化后的结果: ““2019-04-08T11:31:05.778Z"“new Date().toJSON();new Date().toISOString();// 直接调用toJSON和toISOString方法同样能得到字符串: “2019-04-08T11:31:44.432Z"可以让toJSON()方法返回任何值, 它都能正常工作.const stu = { name: “小明”, age: 10, score: { math: 88, english: 99 }, toJSON() { return this.name; }};JSON.stringify(stu);// 序列化后的结果: ““小明"“toJSON()可以作为函数过滤器的补充, 因此理解序列化的内部顺序十分重要. 假设把一个对象传入JSON.stringify(), 序列化该对象的顺序如下:(1) 如果存在toJSON()方法而且能通过它取得有效的值, 则调用该方法. 否则, 返回对象本身;(2) 如果提供了第二个参数, 应用这个函数过滤器. 传入函数过滤器的值是第(1)步返回的值;(3) 对第(2)步返回的每个值进行相应的序列化;(4) 如果提供了第三个参数, 执行相应的格式化.解析选项JSON.parse()方法也可以接收另一个参数, 该参数是一个函数, 将在每个键值对儿上调用. 为了区别 JSON.stringify()接收的替换(过滤)函数(replacer), 这个函数被称为还原函数(reviver), 但实际上这两个函数的签名是相同的——它们都接收两个参数, 一个键和一个值, 而且都需要返回一个值.如果还原函数返回undefined, 则表示要从结果中删除相应的键; 如果返回其他值, 则将该值插入到结果中.const stu = { name: “小明”, age: 10, score: { math: 88, english: 99 }};const jsonText = JSON.stringify(stu);JSON.parse(jsonText, (key, value) => { if (key === ’name’) { return value + ‘牛逼了!’; } else { return value; }});/ 解析结果{ age: 10 name: “小明牛逼了!” score: { math: 88, english: 99 }}*/小结JSON是一个轻量级的数据格式, 可以简化表示复杂数据结构的工作量. JSON使用JavaScript语法的子集表示对象、数组、字符串、数值、布尔值和null.ECMAScript5定义了一个原生的JSON对象, 可以用来将对象序列化为JSON字符串或者将JSON数据解析为JavaScript对象. JSON.stringify()和JSON.parse()方法分别用来实现上述两项功能. 这两个方法都有一些选项, 通过它们可以改变过滤的方式, 或者改变序列化的过程.