一分钟搞懂JavaScript中的JSON对象

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了一分钟搞懂JavaScript中的JSON对象，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2785字，纯文字阅读大概需要4分钟。

内容图文

JSON（JavaScript Object Notation）是表示值和对象的通用格式。

JavaScript 提供了如下方法：

• JSON.stringify 将对象转换为 JSON。
• JSON.parse 将 JSON 转换回对象。

stringify 方法提供了三个参数，分别是object,replacer,space

1. object就是需要转换的对象
2. replacer 表示是需要转换哪些属性的数组或者一个映射函数
3. 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); //如你所见

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 

内容总结

以上是互联网集市为您收集整理的一分钟搞懂JavaScript中的JSON对象全部内容，希望文章能够帮你解决一分钟搞懂JavaScript中的JSON对象所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端