你可能不知道的 JSON.stringfy 用法

写在前面

JSON.stringfy()是将一个 JavaScript 对象转化为 JSON 格式字符串的标准方式。许多 JavaScript 框架在其内部,都会使用 JSON.stringify()Expressres.json()Axiospost,以及webpack stats,它们都调用了 JSON.stringify() 方法,并包含错误案例。

简单入门

所有的现代 JavaScript 运行时都支持 JSON.stringify(),甚至 IE8 都支持它。下面是一个将简单对象转化为 JSON 的例子:

const obj = { answer: 42 };

const str = JSON.stringify(obj);
str; // '{"answer":42}'
typeof str; // 'string'

你可能经常看到 JSON.stringify()JSON.parse() 一起配合使用的场景,就像下面的代码一样,这种模式是实现深拷贝的方式之一:

const obj = { answer: 42 };
const clone = JSON.parse(JSON.stringify(obj));

clone.answer; // 42
clone === obj; // false

错误以及边界用例

JSON.stringify() 在转化对象存在循环引用时,会抛出错误。更简单地说,就是如果一个对象有一个属性指向它本身,JSON.stringify() 会抛出错误,比如:

const obj = {};
// 存在循环引用的对象,它指向它本身
obj.prop = obj;

// 会抛出 "TypeError: TypeError: Converting circular structure to JSON" 异常
JSON.stringify(obj);

这是 JSON.stringify() 会抛出异常的唯一情况,除非你通过声明自定义的 toJSON() 方法或者 replacer 函数。尽管如此,你仍然应该将 JSON.stringify() 包含在 try/catch 语句中,因为循环引用在实践中十分常见。

同时,一些边界用例下,JSON.stringify() 并不会抛出错误,但是你可能却期望它抛出错误。比如说,JSON.stringify() 会将 NaNInfinity 转化为 null:

const obj = { nan: parseInt('not a number'), inf: Number.POSITIVE_INFINITY };

JSON.stringify(obj); // '{"nan":null,"inf":null}'

JSON.stringify() 也会直接省略那些值为 functionsundefined 的属性,如下:

const obj = { fn: function() {}, undef: undefined };

// 它会返回空对象
JSON.stringify(obj); // '{}'

格式化

JSON.stringify() 的第一个参数是被序列化为 JSON 的对象。JSON.stringify() 实际上可以接受 3 个参数,同时第三个参数被称作 spacesspaces 参数被用于采用一种可以提高可读性的方式来格式化 JSON 字符串。

你可以传递类型为 string 或者 numberspaces 参数。如果 spacesundefined,那么 JSON.stringify() 会将每个键值放到单独的一行,同时为其增加正确的缩进空格,比如:

const obj = { a: 1, b: 2, c: 3, d: { e: 4 } };

// '{"a":1,"b":2,"c":3,"d":{"e":4}}'
JSON.stringify(obj);

// {
//   "a": 1,
//   "b": 2,
//   "c": 3,
//   "d": {
//     "e": 4
//   }
// }
JSON.stringify(obj, null, '  ');

// 数字 2 会达到和上面一样的效果,它代表空格的个数
JSON.stringify(obj, null, 2);

spaces 字符串不一定非要是空格,虽然通常我们会使用空格,比如它也可以是下划线:

// {
// __"a": 1,
// __"b": 2,
// __"c": 3,
// __"d": {
// ____"e": 4
// __}
// }
JSON.stringify(obj, null, '__');

Replacers

JSON.stringify() 的第二个参数是 replacer 函数。在上文的例子中,它等于 null。JavaScript 会对对象中的每一个键值对调用 replacer 函数,然后会使用其返回值,作为格式化后的值,比如:

const obj = { a: 1, b: 2, c: 3, d: { e: 4 } };

// 使每个属性的值递增 1
// '{"a":2,"b":3,"c":4,"d":{"e":5}}'
JSON.stringify(obj, function replacer(key, value) {
  if (typeof value === 'number') {
    return value + 1;
  }
  return value;
});

replacer 函数在省略敏感数据时,十分有用。假设你想要省略所有包含 password 的属性:

const obj = {
  name: 'Jean-Luc Picard',
  password: 'stargazer',
  nested: {
    hashedPassword: 'c3RhcmdhemVy'
  }
};

// '{"name":"Jean-Luc Picard","nested":{}}'
JSON.stringify(obj, function replacer(key, value) {
  // 这个函数会被调用 5 次,这里的 key 依次为:
  // '', 'name', 'password', 'nested', 'hashedPassword'
  if (key.match(/password/i)) {
    return undefined;
  }
  return value;
});

toJSON 方法

JSON.stringify() 方法在遍历对象的同时,也会关注那些拥有 toJSON() 方法的属性。如果它发现 toJSON() 方法,JSON.stringify() 会调用它,然后将它的返回值替换格式化后的值,比如:

const obj = {
  name: 'Jean-Luc Picard',
  nested: {
    test: 'not in output',
    toJSON: () => 'test'
  }
};

// '{"name":"Jean-Luc Picard","nested":"test"}'
JSON.stringify(obj);

toJSON() 方法可以返回任意的值,包括对象、基础类型,或者 undefined。如果 toJSON() 返回 undefinedJSON.stringify() 将会忽略这个属性。

很多 JavaScript 模块使用 toJSON() 来确保序列化复杂对象的正确性,比如 Mongoose documentsMoment 对象

最后

JSON.stringify() 是 JavaScript 中较核心的基础方法。许多库和框架在其内部都使用它,因此,深入的理解它,可以帮助你更好地使用你喜欢的 npm 模块。比如,你可以在 Express REST API 中利用 toJSON 方法来格式化原生 Date 类型,或者在 Axios 中,能够正确地通过 HTTP 请求发送包含循环引用的对象。

原文链接:http://thecodebarbarian.com/the-80-20-guide-to-json-stringify-in-javascript.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容