ES5—JSON对象

ES5提供一个内置的(全局)JSON对象,可用序列化(JSON.stringfy)和反序列化(JSON.parse)来对数据进行操作,下面我就为大家介绍一下他们的用法。

1. 一般用法

var test={
    "name": "susan",
    "age" : 22
}
var str= '{"name": "susan"}';

console.log(JSON.stringfy(test)); // '{"name": "susan", "age" : 22}'
console.log(JSON.parse(str)); // Object {"name": "susan"}

但除此之外,他们还有多个参数可选,以便处理数据。

2. JSON.stringfy 序列化

2.1 概述

JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串。

2.2 语法

JSON.stringify(value[, replacer [, space]])

value: 将要序列化成 JSON 字符串的值。
replacer可选: 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理; 如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中。
space可选: 指定缩进用的空白字符串,用于美化输出(pretty-print)。

2.3 举例

2.3.1 replacer 参数为fn

var o = {
    "name":"susan", 
    "age": 22, 
    "luckyNo": "7"
};

var ret = JSON.stringify(o, function(key,value){
    return typeof value === 'string' ? undefined : value
    //console.log(value)
    //return typeof value;
}, 2)
console.log(ret)

上面代码在输出时,得到的字符串将不会再呈现出一行输出,而是正常我们在sublime或其他编辑器里的格式,并采用4个space进行格式化。此外,上面对o这个对象的操作是,如果预处理函数的返回值为undefined,那么将不会返回值,因此,上面代码的最终结果是:

'{
    "age": 22
}'

2.3.2 replacer 参数为数组

这个网址 http://www.tuicool.com/articles/RNNbYz 讲的非常详细,大家可以参考一下。

3. JSON.parse 反序列化

3.1 概述

JSON.parse() 方法可以将一个 JSON 字符串解析成为一个 JavaScript 值。在解析过程中,还可以选择性的篡改某些属性的原始解析值。

3.2 语法

JSON.parse(text[, reviver])

text: 需要解析的 JSON 字符串
reviver可选: 一个函数,用来转换解析出的属性值。

3.3 举例

var json=JSON.parse('{"name":"susan", "age": 22, "luckyNo": "7"}', function(key,val){
    //1. return (typeof val === 'string' && parseInt(val) != NaN) ? parseInt(val) : val; 
    //上面结果是 Object {name: NaN, age: 22, luckyNo: 7}

    //2. return typeof val === 'number' ?  parseInt(val):val; 
    //上面的结果是 Object {name: "susan", age: 22, luckyNo: "7"}

    return typeof val === 'string' && !isNaN(parseInt(val)) ? parseInt(val) : val 
    // 最终结果是 Object {name: "susan", age: 22, luckyNo: 7}
});

在上面的代码中,我们在reviver中对数据进行处理,如果其实一个数字字符串,我们则对其进行parseInt操作,确保返回的value必定是数值型的。
我这里通过一系列操作对实现目的进行优化,因此结果就是既让数字型字符串输出为数字,也是的非数字型的字符处保留下来。

4. 参考地址

http://www.tuicool.com/articles/vMv6b2z
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse