JSON(JavaScript Object Notation)是表示值和对象的通用格式。
JavaScript 提供了如下方法:
-
JSON.stringify
将对象转换为 JSON。 -
JSON.parse
将 JSON 转换回对象。
stringify 方法提供了三个参数,分别是object,replacer,space
- object就是需要转换的对象
- replacer 表示是需要转换哪些属性的数组或者一个映射函数
- space 则表示输出的字符串的美观性,可以设置成空格数量
需要注意的是,object不能有循环引用,俗称“环形”结构;
代码如下:
let room = { number: 2, }; let meetup = { title: "Conference", participants: ["john", "joe"], }; meetup.place = room; room.occupiedBy = meetup; // stringify 属性的第二个参数replacer,接收属性数组或者映射函数; console.log(JSON.stringify(meetup, ["title", "participants"])); //{"title":"Conference","participants":["john","joe"]} // 接下来这样呢? meetup.participants = [{ name: "Alice" }, { name: "John" }]; console.log(JSON.stringify(meetup, ["title", "participants"])); //{"title":"Conference","participants":[{},{}]} // 这里可以看到,replacer执行的过滤很严格,所以我们需要在属性数组中追加属性 console.log(JSON.stringify(meetup, ["title", "participants", "name"])); //{"title":"Conference","participants":[{"name":"Alice"},{"name":"John"}]} // 虽然可行,但是属性列表太长了并不优雅;接下来: var result = JSON.stringify(meetup, function replacer(key, value) { // 让我们把循环引用的键返回undefined // console.log(key); return key == "occupiedBy" ? undefined : value; }); console.log(result);//{"title":"Conference","participants":[{"name":"Alice"},{"name":"John"}],"place":{"number":2}} // replacer会被递归的调用,直到所有可枚举的属性执行完毕 // 最后一步,第三个参数space表示空格的数量, 更美观 var beauty = JSON.stringify(meetup, function replacer(key, value) { return key == "occupiedBy" ? undefined : value; },2); console.log(beauty); //如你所见` { "title": "Conference", "participants": [ { "name": "Alice" }, { "name": "John" } ], "place": { "number": 2 } } `
parse方法则是解析JSON字符串为Object;parse方法提供了两个参数string,reviver 跟stringify的用法几乎一致;对每个可选的键值对进行调用;
代码如下:
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'; let meetup = JSON.parse(str, function(key, value) { if (key == 'date') return new Date(value); return value; }); alert( meetup.date.getDate() ); // 现在正常运行了!
当然,嵌套对象也是可以的,因为这一个过程是递归进行的,如何验证?只需要在reviver函数中打印一句话就显而易见了
toJSON方法允许我们自定义JSON转换;如果可用,JSON.stringify
会自动调用它
代码如下:
let room = { number: 23, toJSON() { return this.number; } }; let meetup = { title: "Conference", room }; alert( JSON.stringify(room) ); // 23 alert( JSON.stringify(meetup) ); /* { "title":"Conference", "room": 23 } */
toJSON 方法即可用于自身,也可用于嵌套情况下;
推荐阅读:《现代JavaScript教程》- JSON方法,toJSON
2021-02-05