乐趣区

读书笔记(01) – JSON – JavaScript高级程序设计

JSON 与 JavaScript 对象
JSON 是一种表示结构化数据的存储格式,语法格式上与 JavasScript 对象有些类似。
TIPS: 与 JavaScript 对象的格式区别

不支持变量、函数或对象实例
字符串,属性名必须使用双引号
无需定义变量存储引用

// JSON 对象
{
“name”: “KenTsang”,
“age”: 27,
“job”: “Developer”
}

// js 对象(该对象将作在后续例子引用)
let person = {
name: ‘KenTsang’,
age: 27,
job: ‘Developer’
}

ES5 定义了一个全局对象 JSON,IE8+ 以上支持,该对象提供来 stringify 和 parse 两个方法用于 JSON 数据解析和序列化。
stringify()
stringify 用于把 JavaScript 对象序列化 JSON 字符串,
在序列化 JavaScript 对象时,所有函数及原型成员都会被有意忽略,不体现在结果中。此外,值为 undefined 的任何属性也都会被跳过。
JSON.stringify(
value: Object,
replace: Array | function(key,value) {},
space: number | string
)
该方法接受三个参数

参数:接收传入的 js 对象
参数:过滤器(数组 / 函数)
参数:字符串缩进(数值 / 字符串)

参数 2 – 过滤器
TIPS1: 过滤器是一个数组时,序列化结果只包含数组中列出的属性
let result = JSON.stringify(person, [“name”, “job”]);

// 输出结果
// {“name”:”KenTsang”,”job”:”Developer”}
TIPS2: 过滤器是一个函数时(替换函数)
var jsonStr = JSON.stringify(Person, function(key, value){
if (key == ‘age’) {
return ‘secret’;
} else {
return value;
}
})

// 输出结果
// {“name”:”KenTsang”,”age”:”secret”,”job”:”Developer”}
如果替换函数返回的是 undefined,则该属性不会被包含在序列化结果中。
参数 3 – 字符串缩进
用于控制序列化结果中的缩进和空白符,输出序列结果带缩进格式,方便预览查看。实际应用开发不多。

为数值时,表示每个级别缩进的空格数(最大 10)
为字符串时,则作为缩进字符(替换默认的空格,最大 10 个字符)

let result = JSON.stringify(person, null, ‘–‘);

// 输出结果
/*
{
–“name”: “KenTsang”,
–“age”: 27,
–“job”: “Developer”
}
*/
toJSON()方法
应对更复杂的一些需求,我们可以通过 toJSON()对某些对象进行自定义序列化的需求。
let person = {
name: “KenTsang”,
age: 27,
job: ‘Developer’,
toJSON: function() {
return {
“name”: “KT”,
“age”: “2*”,
“job”: “DP”
}
}
};

let result = JSON.stringify(person);

// 输出结果
// {“name”:”KT”,”age”:”2*”,”job”:”DP”}
TIPS: 序列化顺序

如果存着 toJSON 方法而且能通过它取得有效的值,则调用该方法。否则,返回对象本身。
如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第 (1) 步的值。
对第 (2) 步返回的每个值进行相应的序列化。
如果提供了第三个参数,执行相应的格式化。

— 摘自《JavaScript 高级程序设计》–

parse()
parse 用于把 JSON 字符串解析成 JavaScript 对象
JSON.parse(text: string, reviver: function(key, value) {})
该方法接受三个参数

参数:接收传入的 json 字符串
参数:还原函数

还原函数

返回 undefined, 结果中删除相应的键
返回其它值,则将值插入到结果中

let Person = {
name: “KenTsang”,
age: 27,
job: “Developer”,
birth: new Date(1991, 3, 19)
};

var jsonStr = JSON.stringify(Person);
var jsObj = JSON.parse(jsonStr, function(key, value) {
if (key == ‘birth’) {
return new Date(value);
} else {
return value);
}
});

jsObj.birth.getFullYearh();

// 输出结果:1991
例子中通过还原函数,重新实例一个 Date 对象,所以可以用到 getFullYear()方法。

参考文档
《JavaScript 高级程序设计》
作者:以乐之名本文原创,有不当的地方欢迎指出。转载请指明出处。

退出移动版