轻量级数据格式——JSON

黄舟

发布时间：2017-02-28 15:09:25

1704人浏览过

来源于php中文网

原创

今天这数学实在看不下去

来换换脑子，写写前端
今天就写一个小知识json

在很久很久以前，XML是互联网上传输数据的标准
但是大家普遍反映XML太繁琐
再后来，随着Web的发展
人们发现JSON作为JavaScript语法的子集使用更方便
于是JSON就成为了标准
现在大家都把JSON作为通信的数据格式

JSON基本语法

（JSON：JavaScript Object Notation，JavaScript对象表示法）
JSON语法大体分为三种类型值

简单类型值：可表示字符串、数字、布尔值和null
对象：复杂数据类型，表示无序键值对
数组：复杂数据类型，表示有序值列表

注意JSON不支持undefined、不支持函数

简单类型值

单独的基本类型值也可以看做JSON
语法与JavaScript相同
只有一点要注意
在我们JavaScript中字符串可以用双引号表示，也可以用单引号表示
但是JSON中的字符串格式必须使用双引号

对象

由于JSON是JavaScript语法的子集
所以我主要说一下不太一样的地方
先看一下我们常用的对象字面量声明格式

var man = {
    name: 'payen',
    sex: 'male',
    age: 19};

我们JavaScript中对象可以给属性加引号也可以不加
（为了区分普通对象与JSON对象，通常不加引号）
但在JSON中对象要求给属性加（双）引号
我们上面的对象在JavaScript中也可以这么写，完全等价

var man = {    "name": "payen",    "sex": "male",    "age": 19};

而用JSON表示上面的对象就是

{
    "name": "payen",
    "sex": "male",
    "age": 19}

（JSON中没有变量的概念，没有分号）
当然JSON中对象的值也可以是对象
不管多么复杂的JSON，对象的键（属性）都要加（双）引号

数组

虽然在我们JavaScript中，数组严格来说属于对象
但我们通常都把它们区别对待
我们通用的声明数组字面量的方法

var value = [123, 'abc', true];

JSON也是相同的语法

[123, "abc", true]

再次强调，JSON没有变量和分号

通常来说，数组和对象是JSON的最外层形式
通过数组、对象以及简单类型值能够构造各式各样的JSON数据格式

JSON解析与序列化

JSON之所以流行，更重要的原因
便是它更容易解析为有用的对象

JSON对象

很早之前的JSON解析器用的是JavaScript的eval()
但是它是有风险的，可能会执行恶意代码
ES5规范了解析JSON的行为
定义了全局对象JSON
它有两个方法

stringify()
JavaScript对象 –> JSON字符串
parse()
JSON字符串 –> JavaScript对象

最基本的用法当然就是
我们把要转换的变量作为参数穿进去
举个例子（这个例子会一直用）

var man = {    'name': "payen", <--
    sex: "male", <--
    "age": 19,    "school": {        "name": 'HUST',        "sex": undefined, <--
        "location": function(){} <--
    }
}
var str = JSON.stringify(man);
console.log(str);
console.log(typeof str);

下面我们看看控制台打印

可以看到JSON.stringify真的返回了JSON字符串
我们无引号还有单引号的属性在JSON字符串中都变成了双引号
并且属性值为undefined或者函数的属性被自动忽略了
（原型成员更是被忽略掉）

虽然JSON.stringify()在对象中遇到undefined、function（也包括ES6的symbol）会自动被忽略
但是数组不一样
数组没有对象绝情把它们一脚踢开，而是返回null

console.log(JSON.stringify([123, undefined, null, function(){}]));

我们可以用JSON.parse还原为JavaScript对象

console.log(JSON.parse(str));

下面我们来看看这两个函数更深的用法

Json数据格式排版高亮插件json-viewer.js

下载

stringify序列化

这个方法除了填待序列化对象之外，还可以接受两个参数
其一是一个过滤器，可以是数组，也可以是函数
其二是可以指定JSON字符串的缩进

过滤器

数组过滤器

数组的形式比较简单，我们可以指定我们想要的对象属性
还是我们上面的例子

var str = JSON.stringify(man,['name','sex']);
console.log(str);

函数过滤器

我们传入的函数接收连个参数，键（属性名）与值（属性值）
返回的值就是相应键的值
若函数返回undefined，属性会被忽略

var str = JSON.stringify(man, function(key, value){
    if(key == 'name'){        return 'abc';
    }    if(key == 'sex'){        return;
    }    return value;
});
console.log(str);

注意这里最后一定要写return value; 才能正常显示其他值
如果使用了switch语句就写default: return value;

缩进

空格填充

另一个参数可以填写数字指定缩进的空格数（最大缩进10）

var str = JSON.stringify(man, null, 4);
console.log(str);

字符填充

我们也可以指定缩进字符

var str = JSON.stringify(man, null, "- - ");
console.log(str);

toJSON()方法

可能有些时候stringify不够满足我们的需求
这时我们可以给对象定义toJSON()方法
（但仍然是调用stringify()方法）
返回自身的JSON的数据格式
原生Date对象有默认toJSON()返回日期字符串（同Date中方法toISOString()结果相同）

我们可以给我们的对象添加一个toJSON属性

var man = {    ...,
    toJSON: function(){        return this.school;
    }
}
var str = JSON.stringify(man);
console.log(str);

这里再多说一句
很多同学误认为toJSON()返回的是JSON字符串
其实不是的
toJSON()返回的应该是一个适当的值，然后由JSON.stringify()对其进行序列化
所以toJSON()是返回一个能够被字符串化的安全JSON值
下面我们来看看调用JSON.stringify()发生了什么

序列化对象顺序

如果对象有toJSON()并且能获得有效值，优先调用，否则返回对象本身
若有第二个参数，对上一步返回的对象应用过滤器
对上一步返回的每个值进行相应序列化
若有第三个参数，执行序列化

parse解析

JSON.parse也可以接受另一个参数，它是一个函数
类似于上面序列化中过滤器的过滤函数
它被称作还原函数，同样接受键和值作为参数
首先我现在我们例子中的对象添加一个方法

var man = {    ...,
    releaseDate: new Date(2016,11,11)
}
var str = JSON.stringify(man);
console.log(str);

我们看到，由于Date对象存在toJSON()
序列化之后调用了toJSON()
我们看到了这样的字符串

console.log(JSON.parse(str));

这样的数据不是我们想要的
这样的情况我们怎么处理呢？
答案是使用还原函数

可以这样做

var msg = JSON.parse(str,function(key, value){
    if(key == 'releaseDate'){        return new Date(value);
    }else{        return value;
    }
})
console.log(msg.releaseDate.getFullYear(),
            msg.releaseDate.getMonth(),
            msg.releaseDate.getDate());