【译】JSON.stringify的replacer参数-原创手记-慕课网

符合预期的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