为了账号安全,请及时绑定邮箱和手机立即绑定

【译】JSON.stringify的replacer参数

标签:
JavaScript

符合预期的CoyPan(id: Coy_Pan)
作者:CoyPan,BAT某厂符合预期的FE,正努力成为一名出色的工程师
作者:Coy_Pan

这是一篇译文
原文链接:https://pawelgrzybek.com/til-the-power-of-json-stringify-replacer-parameter/

原文标题:TIL — THE POWER OF JSON.STRINGIFY REPLACER PARAMETER

–正文开始–

我遇到了一个有趣的问题,耗费了我不少的脑细胞。让我来分享一下我学到了什么东西,也许下一次当你遇到相似的问题时,可以节省不少的时间。让我们来看一下JSON.stringify()

const dude = {
  name: "Pawel",
  friends: ["Dan", "Pedro", "Mr Gregory"]
};
const dudeStringified = JSON.stringify(dude);

console.log(dudeStringified);
// {"name":"Pawel","friends":["Dan","Pedro","Mr Gregory"]}

上面的例子没毛病。但是,我项目中遇到的数据结构需要我去处理Set,事情就变得有趣了。来看一下下面的例子。

const dude = {
  name: "Pawel",
  friends: new Set(["Dan", "Pedro", "Mr Gregory"])
};
const dudeStringified = JSON.stringify(dude);

console.log(dudeStringified);
// {"name":"Pawel","friends":{}}

我曾经以为,Set可以被正确的转换为一个数组。如你所能预料的,我错了。Set, WeakSet, Map and WeakMap 会被JSON.stringify忽略,或者以null代替。还好,JSON.stringify的第二个可选参数可以让我们转义Set并且将其转换为数组。

const dude = {
  name: "Pawel",
  friends: new Set(["Dan", "Pedro", "Mr Gregory"])
};
const dudeStringified = JSON.stringify(dude, (key, value) =>
  value instanceof Set ? [...value] : value
);

console.log(dudeStringified);
// {"name":"Pawel","friends":["Dan","Pedro","Mr Gregory"]}

问题解决了?

今天我学到了

JSON.stringify() 第二个可选参数可以是一个函数或者是一个白名单数组,仅转换该数组中具有键值的成员。

// 第二个参数是函数

const dude = {
  name: "Dan"
};
const dudeStringified = JSON.stringify(dude, (key, value) =>
  key === "name" ? "Pawel" : value
);

console.log(dudeStringified);
// {"name":"Pawel"}
// 第二个参数是数组,只有name属性会被转换。

const dude = {
  name: "Pawel",
  friends: new Set(["Dan", "Pedro", "Mr Gregory"])
};

const dudeStringified = JSON.stringify(dude, ["name"]);

console.log(dudeStringified);
// {"name":"Pawel"}

JSON.stringify()的第三个参数是字符串或数字。可以给文本添加缩进、空格和换行符,

// 第三个参数是数字

const dude = {
  name: "Pawel",
  friends: ["Dan", "Pedro", "Mr Gregory"]
};
const dudeStringified = JSON.stringify(dude, null, 4);

console.log(dudeStringified);
// {
//   "name": "Pawel",
//   "friends": [
//       "Dan",
//       "Pedro",
//       "Mr Gregory"
//   ]
// }
// 第三个参数是字符串

const dude = {
  name: "Pawel",
  friends: ["Dan", "Pedro", "Mr Gregory"]
};
const dudeStringified = JSON.stringify(dude, null, "?");

console.log(dudeStringified);
// {
// ?"name": "Pawel",
// ?"friends": [
// ??"Dan",
// ??"Pedro",
// ??"Mr Gregory"
// ?]
// }

下一次,保持好奇心。

–正文结束–

符合预期的CoyPan(id: Coy_Pan)
作者:CoyPan,BAT某厂符合预期的FE,正努力成为一名出色的工程师
作者:Coy_Pan

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
12
获赞与收藏
119

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消