我的朋友因为 JSON.stringify 差点丢了奖金

英文 | https://medium.com/frontend-canteen/my-friend-almost-lost-his-year-end-bonus-because-of-json-stringify-9da86961eb9e

翻译 | 杨小爱

这是发生在我朋友身上的真实故事，他的绰号叫胖头。由于JSON.stringify的错误使用，他负责的其中一个业务模块上线后出现了bug，导致某个页面无法使用，进而影响用户体验，差点让他失去年终奖。

在这篇文章中，我将分享这个悲伤的故事。然后我们还将讨论 JSON.stringify 的各种功能，以帮助您避免将来也犯同样的错误。

我们现在开始

故事是这样的。

他所在的公司，有一位同事离开了，然后胖头被要求接受离开同事的工作内容。

没想到，在他接手这部分业务后不久，项目中就出现了一个bug。

当时，公司的交流群里，很多人都在讨论这个问题。

产品经理先是抱怨：项目中有一个bug，用户无法提交表单，客户抱怨这个。请开发组尽快修复。

然后测试工程师说：我之前测试过这个页面，为什么上线后就不行了？

而后端开发者说：前端发送的数据缺少value字段，导致服务端接口出错。

找到同事抱怨后，问题出在他负责的模块上，我的朋友胖头真的很头疼。

经过一番检查，我的朋友终于找到了这个错误。

事情就是这样。

发现页面上有一个表单允许用户提交数据，然后前端应该从表单中解析数据并将数据发送到服务器。

表格是这样的：（下面是我的模拟）

这些字段是可选的。

通常，数据应如下所示：

1. let data = {
2. signInfo: [
3. {
4. "fieldId": 539,
5. "value": "silver card"
6. },
7. {
8. "fieldId": 540,
9. "value": "2021-03-01"
10. },
11. {
12. "fieldId": 546,
13. "value": "10:30"
14. }
15. ]
16. }

然后它们应该转换为：

但问题是，这些字段是可选的。如果用户没有填写某些字段，那么数据会变成这样：

1. let data = {
2. signInfo: [
3. {
4. "fieldId": 539,
5. "value": undefined
6. },
7. {
8. "fieldId": 540,
9. "value": undefined
10. },
11. {
12. "fieldId": 546,
13. "value": undefined
14. }
15. ]
16. }

他们将变成这样：

JSON.stringify 在转换过程中忽略其值为undefined的字段。

因此，此类数据上传到服务器后，服务器无法解析 value 字段，进而导致错误。

一旦发现问题，解决方案就很简单，为了在数据转换为 JSON 字符串后保留 value 字段，我们可以这样做：

1. let signInfo = [
2. {
3. fieldId: 539,
4. value: undefined
5. },
6. {
7. fieldId: 540,
8. value: undefined
9. },
10. {
11. fieldId: 546,
12. value: undefined
13. },
14. ]
15. let newSignInfo = signInfo.map((it) => {
16. const value = typeof it.value === 'undefined' ? '' : it.value
17. return {
18. ...it,
19. value
20. }
21. })
22. console.log(JSON.stringify(newSignInfo))
23. // '[{"fieldId":539,"value":""},{"fieldId":540,"value":""},{"fieldId":546,"value":""}]'

如果发现某个字段的值为undefined，我们将该字段的值更改为空字符串。

虽然问题已经解决了，但是，我们还需要思考这个问题是怎么产生的。

本来这是一个已经上线好几天的页面，为什么突然出现这个问题？仔细排查，原来是产品经理之前提出了一个小的优化点，然后，胖头对代码做了一点改动。但是胖头对 JSON.stringify 的特性并不熟悉，同时，他认为改动比较小，所以没有进行足够的测试，最终导致项目出现 bug。

好在他发现问题后，很快就解决了问题。这个bug影响的用户少，所以老板没有责怪他，我的朋友奖金没有丢掉，不然，影响大的话，估计奖金真的就没有了，甚至还会让他直接离开。

接着，我们一起来了解一下 JSON.stringify，它为啥那么“厉害”，差点把我朋友的奖金都给弄丢了。

了解一下 JSON.stringify

其实，这个bug主要是因为胖头对JSON.stringify不熟悉造成的，所以，这里我们就一起来分析一下这个内置函数的一些特点。

基本上，JSON.stringify() 方法将 JAVAScript 对象或值转换为 JSON 字符串：

同时，JSON.stringify 有以下规则。

1、如果目标对象有toJSON()方法，它负责定义哪些数据将被序列化。

2、 Boolean、Number、String 对象在字符串化过程中被转换为对应的原始值，符合传统的转换语义。

3、 undefined、Functions 和 Symbols 不是有效的 JSON 值。如果在转换过程中遇到任何此类值，则它们要么被忽略（在对象中找到），要么被更改为 null（当在数组中找到时）。

4、 所有 Symbol-keyed 属性将被完全忽略

5、 Date的实例通过返回一个字符串来实现toJSON()函数（与date.toISOString()相同）。因此，它们被视为字符串。

6、 数字 Infinity 和 NaN 以及 null 值都被认为是 null。

7、 所有其他 Object 实例（包括 Map、Set、WeakMap 和 WeakSet）将仅序列化其可枚举的属性。

8、找到循环引用时抛出TypeError（“循环对象值”）异常。

9、 尝试对 BigInt 值进行字符串化时抛出 TypeError（“BigInt 值无法在 JSON 中序列化”）。

自己实现 JSON.stringify

理解一个函数的最好方法是自己实现它。下面我写了一个模拟 JSON.stringify 的简单函数。

1. const jsonstringify = (data) => {
2. // Check if an object has a circular reference
3. const isCyclic = (obj) => {
4. // Use a Set to store the detected objects
5. let stackSet = new Set()
6. let detected = false
7.  
8.  
9. const detect = (obj) => {
10. // If it is not an object, we can skip it directly
11. if (obj && typeof obj != 'object') {
12. return
13. }
14. // When the object to be checked already exists in the stackSet,
15. // it means that there is a circular reference
16. if (stackSet.has(obj)) {
17. return detected = true
18. }
19. // save current obj to stackSet
20. stackSet.add(obj)
21.  
22.  
23. for (let key in obj) {
24. // check all property of `obj`
25. if (obj.hasOwnProperty(key)) {
26. detect(obj[key])
27. }
28. }
29. // After the detection of the same level is completed,
30. // the current object should be deleted to prevent misjudgment
31. /*
32. For example: different properties of an object may point to the same reference,
33. which will be considered a circular reference if not deleted
34.  
35.  
36. let tempObj = {
37. name: 'bytefish'
38. }
39. let obj4 = {
40. obj1: tempObj,
41. obj2: tempObj
42. }
43. */
44. stackSet.delete(obj)
45. }
46.  
47.  
48. detect(obj)
49.  
50.  
51. return detected
52. }
53.  
54.  
55. // Throws a TypeError ("cyclic object value") exception when a circular reference is found.
56. if (isCyclic(data)) {
57. throw new TypeError('Converting circular structure to JSON')
58. }
59.  
60.  
61. // Throws a TypeError when trying to stringify a BigInt value.
62. if (typeof data === 'bigint') {
63. throw new TypeError('Do not know how to serialize a BigInt')
64. }
65.  
66.  
67. const type = typeof data
68. const commonKeys1 = ['undefined', 'function', 'symbol']
69. const getType = (s) => {
70. return Object.prototype.toString.call(s).replace(/[object (.*?)]/, '$1').toLowerCase()
71. }
72.  
73.  
74. if (type !== 'object' || data === null) {
75. let result = data
76. // The numbers Infinity and NaN, as well as the value null, are all considered null.
77. if ([NaN, Infinity, null].includes(data)) {
78. result = 'null'
79.  
80.  
81. // undefined, arbitrary functions, and symbol values are converted individually and return undefined
82. } else if (commonKeys1.includes(type)) {
83.  
84.  
85. return undefined
86. } else if (type === 'string') {
87. result = '"' + data + '"'
88. }
89.  
90.  
91. return String(result)
92. } else if (type === 'object') {
93. // If the target object has a toJSON() method, it's responsible to define what data will be serialized.
94.  
95.  
96. // The instances of Date implement the toJSON() function by returning a string (the same as date.toISOString()). Thus, they are treated as strings.
97. if (typeof data.toJSON === 'function') {
98. return jsonstringify(data.toJSON())
99. } else if (Array.isArray(data)) {
100. let result = data.map((it) => {
101. // 3# undefined, Functions, and Symbols are not valid JSON values. If any such values are encountered during conversion they are either omitted (when found in an object) or changed to null (when found in an array).
102. return commonKeys1.includes(typeof it) ? 'null' : jsonstringify(it)
103. })
104.  
105.  
106. return `[${result}]`.replace(/'/g, '"')
107. } else {
108. // 2# Boolean, Number, and String objects are converted to the corresponding primitive values during stringification, in accord with the traditional conversion semantics.
109. if (['boolean', 'number'].includes(getType(data))) {
110. return String(data)
111. } else if (getType(data) === 'string') {
112. return '"' + data + '"'
113. } else {
114. let result = []
115. // 7# All the other Object instances (including Map, Set, WeakMap, and WeakSet) will have only their enumerable properties serialized.
116. Object.keys(data).forEach((key) => {
117. // 4# All Symbol-keyed properties will be completely ignored
118. if (typeof key !== 'symbol') {
119. const value = data[key]
120. // 3# undefined, Functions, and Symbols are not valid JSON values. If any such values are encountered during conversion they are either omitted (when found in an object) or changed to null (when found in an array).
121. if (!commonKeys1.includes(typeof value)) {
122. result.push(`"${key}":${jsonstringify(value)}`)
123. }
124. }
125. })
126.  
127.  
128. return `{${result}}`.replace(/'/, '"')
129. }
130. }
131. }
132. }

写在最后

从一个 bug 开始，我们讨论了 JSON.stringify 的特性并自己实现了它。

今天我与你分享这个故事，是希望你以后遇到这个问题，知道怎么处理，不要也犯同样的错误。

如果你觉得有用的话，请点赞我，关注我，最后，感谢你的阅读，编程愉快！