本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，蕴含一线大厂面试残缺考点、材料以及我的系列文章。
快来收费体验ChatGpt plus版本的，咱们出的钱
体验地址:https://chat.waixingyun.cn
能够退出网站底部技术群，一起找bug.
在开发中，咱们会常常应用 JSON.stringify(object) 来序列化对象，但JSON.stringify办法除了了第一个参数外，还有其它参数可用，明天咱们一起来看看这些参数是做啥的，Let's 开始。
1. 格式化
默认的 JSON.stringify(object) 进去数据是一行字符串，这看起来很丑，如下所示：
const user = { name: '小智', age: 30, isAdmin: true, friends: ['隔壁老王', '小可爱'], address: { city: '天上人间', },}console.log(JSON.stringify(user))// {"name":"小智","age":30,"isAdmin":true,"friends":["隔壁老王","小可爱"],"address":{"city":"天上人间"}}JSON.stringify也有一个内置的格式化器!
console.log(JSON.stringify(user, null, 2)){ "name": "小智", "age": 30, "isAdmin": true, "friends": [ "隔壁老王", "小可爱" ], "address": { "city": "天上人间" }}(如果你想晓得这个 null 是什么，咱们当前再谈）。
在这个例子中，JSON的格式化有2个空格的缩进。咱们还能够指定一个自定义字符，用于缩进。
console.log(JSON.stringify(user, null, '【二哈】')){【二哈】"name": "小智",【二哈】"age": 30,【二哈】"isAdmin": true,【二哈】"friends": [【二哈】【二哈】"隔壁老王",【二哈】【二哈】"小可爱"【二哈】],【二哈】"address": {【二哈】【二哈】"city": "天上人间"【二哈】}}2. 在序列化的数据中暗藏某些属性
JSON.stringify 还有一个很少有人晓得的第二个参，称为 replacer，是一个函数或数组，决定哪些数据要保留在输入中，哪些不要。
举例一，如果，咱们想暗藏用户的明码字段，能够这么做：
const user = { name: '小智', password: '12345', age: 30};console.log(JSON.stringify(user, (key, value) => { if (key === 'password') { return } return value}))输入：
{"name":"小智","age":30}咱们能够进一步重构:
function stripKeys (...keys) { return (key, value) => { if (keys.includes(key)) return return value }}const user = { name: '小智', password: '12345', age: 30, gender: '未知'};console.log(JSON.stringify(user, stripKeys('password', 'gender')))输入：
{"name":"小智","age":30}你也能够传递一个数组:
const user = { name: '小智', password: '12345', age: 30}console.log(JSON.stringify(user, ['name', 'age']))输入：
{"name":"小智","age":30}最酷的是这对数组也无效，假如有如下的数组：
const poetry = [ { name: '小智', content: [ '兴尽晚回舟，误入藕花深处。', '鬼畜，鬼畜，独身百年手速。', '终点太高，于是期待太多，奢求太过，所以永不满足。', ], tags: ['经典', '魔幻', '鬼才'], }, { name: '王大志', content: [ '小人无非就是有急躁的狼。', '信者,无需誓言,不信者,誓言亦无助。' ], tags: ['经典', '魔幻', '鬼才'], },]因为诗太过漂亮，我想闻名，最初输入就想打出输入对于名字的字段，那么也能够应用 JSON.stringify 来做：
console.log(JSON.stringify(poetry, ['name']))输入：
[{"name":"小智"},{"name":"王大志"}]丑陋！
3. 应用 toJSON 来创立自定义输入格局
如果一个对象实现了 toJSON 函数，JSON.stringify 将应用它来串化数据。
考虑一下这个例子：
class Fraction { constructor(n, d) { this.numerator = n; this.denominator = d; }}console.log(JSON.stringify(new Fraction(1, 2)))输入:
{"numerator":1,"denominator":2}如果咱们想让输入的后果是 1/2，那要怎么做呢？实现 toJSON 办法。
class Fraction { constructor(n, d) { this.numerator = n; this.denominator = d; } toJSON() { return `${this.numerator}/${this.denominator}` }}console.log(JSON.stringify(new Fraction(1, 2)))JSON.stringify 依据 toJSON 办法来解析，所以后果是 1/2。
4. 复原数据
持续下面的例子，如果咱们想再次解析JSON时，分数会神奇被还原成原来的对象，这是不是很酷？咱们能够这样做：
class Fraction { constructor(n, d) { this.numerator = n; this.denominator = d; } toJSON() { return `${this.numerator}/${this.denominator}` } static fromJSON(key, value) { if (typeof value === 'string') { const parts = value.split('/').map(Number); if (parts.length === 2) return new Fraction(parts); } return value; }}const fraction = new Fraction(1, 2);const stringified = JSON.stringify(fraction);console.log(stringified);// "1/2"const revived = JSON.parse(stringified, Fraction.fromJSON);console.log(revived);// Fraction { numerator: 1, denominator: 2 }咱们能够向 JSON.parse 传递第二个参数来指定一个 reviver 函数。reviver 的工作是将字符串化的数据 "复原"到它的原始模式。在这里，咱们传递了一个reviver，它是 Fraction 类的静态方法 fromJSON。
乏味的是：这个性能在内置的Date对象中应用。试着查一下 Date.prototype.toJSON
console.log(JSON.stringify(new Date()))//=> '"2022-03-01T06:28:41.308Z"'为了复原日期，咱们能够应用 JSON.parse。
function reviveDate(key, value) { const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,}|)Z$/; if (typeof value === "string" && regex.test(value)) { return new Date(value); } return value;}console.log(JSON.parse('"2022-03-01T06:28:41.308Z"', reviveDate))//=> Tue Mar 01 2022 06:28:41 GMT-0700 (Pacific Daylight Time)5.应用 revivers 暗藏数据
与stringify 一样，parse也能够用来暗藏数据。它们工作形式是一样的:
const user = JSON.stringify({ name: '小智', password: '12345', age: 30,})console.log( JSON.parse(user, (key, value) => { if (key === 'password') return return value }))输入：
{ name: '小智', age: 30 }如果你晓得任何其余很酷的JSON技巧，请通知我 !
完，我是刷碗智，新的一年，咱们一起刷刷刷。
原文：https://dev.to/siddharhshyniben/5-secret-features-of-jsyou-didnt-know-about-5bbg
编辑中可能存在的bug没法实时晓得，预先为了解决这些bug,花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。