[内容首发公众号，欢迎关注]
别让API误了你的KPI

JSON.stringify()和JSON.parse()都是日常开发过程中再也常见不过的api了， 但是近期出了2次客诉却命中了这两个API，当然也存在测试case不全面的问题。

不是被一个倒霉蛋全部命中，但我觉得这两个case可以总结下来，毕竟再简单的API，用到了权重高的项目里，出了bug，那也是个影响KPI的大事。

JSON.stringify()

第一个是前端与外站的合作，原本他们接受的是一个对象，用来渲染页面上一个按钮，和按钮的点击事件,参数为以下

{
    title: '我的页面',
    isHide: true,
    btnText: '完成',
    btnTextEventTag: 'page_finish',
    btnClickFunc: function () {......}
}

由于底层框架升级，现在他们需要一个将原来接受的参数，转成字符串的形式，所以前端直接将参数JSON.stringify()之后传递过去，由于一次性改动的方法过多，涉及到btnClickFunc的也不多，也没有特别注意，第二天就来了客诉，说点击事件失效了... 然后就开始了紧急的排查...

点击事件失效了，第一反应就是传递的btnClickFunc失效了,debugger一看，带有函数的参数JSON.stringify()以后，编程了这样
"{\"title\":\"我的页面\",\"isHide\":true,\"btnText\":\"完成\",\"btnTextEventTag\":\"page_finish\"}"

btnClickFunc没了？是的、btnClickFunc没了,后来解决方式就是JSON.stringify()之前，将btnClickFunc生成一个函数挂载到window上，将函数名作为参数的一部分再传递给对方，对方可以直接通过函数名调用函数。

API复习

JSON.stringify()将值转换为相应的JSON格式，资料来自JSON.stringify()：

JSON.stringify(value[, replacer [, space]])

value：将要序列化成 一个JSON字符串的JavaScript对象或值。

• 转换值如果有 toJSON() 方法，该方法定义什么值将被序列化。

const p = {
    name: 'luck',
    age: 18,
    sex: '女',
    toJSON(){
        return 'hello luck'
    }
}

let t = JSON.stringify(p)
console.log(t) // "hello luck"

• 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。

const p = {
    age: 18,
    name: 'luck',
    sex: '女',
    money: undefined
}

let t = JSON.stringify(p)
console.log(t) // {"age":18,"name":"luck","sex":"女"}

• 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

JSON.stringify(true);
// "true"
JSON.stringify("foo");
// "foo"
JSON.stringify(100);
// "100"

• undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).

JSON.stringify({x: undefined, y: Object, z: Symbol("")});
// '{}'
JSON.stringify([undefined, Object, Symbol("")]);
// '[null,null,null]'

• 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

const a = {}
a.key = a
JSON.stringify(a)
// Uncaught TypeError: Converting circular structure to JSON

• 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

JSON.stringify(
    {[Symbol.for("foo")]: "foo"},
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);
// undefined

• Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。

JSON.stringify(new Date())
// "2022-04-01T12:41:45.938Z"

• NaN 和 Infinity 格式的数值及 null 都会被当做 null。

JSON.stringify(Infinity)
// null
JSON.stringify(null)
// null
JSON.stringify(NaN)
// null

• 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。

const per = {}
Object.defineProperties(per, {
  'name': { value: 'luck', enumerable: true },
  'age': { value: '18', enumerable: false }
})
let p = JSON.stringify(per)
// {"name":"luck"}

replacer：

• 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；

const p = {
    name: 'luck',
    age: 18,
    sex: '女'
}
const t = JSON.stringify(p, (key, value) => {
    if (typeof value === "string") {
        return undefined;
    }
    return value;
})
console.log(t)
// {"age":18}

• 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；

const p = {
    name: 'luck',
    age: 18,
    sex: '女'
}
const t = JSON.stringify(p, ['name', 'sex'])
console.log(t)
// {"name":"luck","sex":"女"}

• 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

const p = {
    name: 'luck',
    age: 18,
    sex: '女'
}
const t = JSON.stringify(p,null)
// "{\"name\":\"luck\",\"age\":18,\"sex\":\"女\"}"

• space：
  指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

JSON.parse()

这个case的背景也是与外部门沟通有关，早上屁股还没坐热乎，某同学就接到客服反馈的错误，说xx页面白页了，吓的孩子脸都白了，白页可是个大问题，又开始了紧急的排查

一看历史记录，这个页面半年都没有改动，怎么会突然白了？

后来查看页面，发现有一个报错SyntaxError:JSON Parse error: Unexpected EOF Stack:parse(native code)，那肯定是JSON Parse报错出错，最后排查是因为，接受到后端接口返回的某个字符串字段，然后前端JSON.parse()后再去渲染对应页面，但是因为与其他业务线共用接口，后端改了字符串返回 9F|0|0,导致JSON.parse('9F|0|0') js报错，影响了整个页面渲染。

最后，因为fe上线快，最后也是由fe做兼容。

这个虽然不直接是fe的锅，但是如果对JSON.parse()的参数要求多严谨一下的话，还是要做些处理，最后解决就是try.cash

// 粗代码
try {
    data = JSON.parse(ret.data);
} catch (err) {
    data = ret.data
    // do something here
};

API复习

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同：JavaScript不是SON，JSON也不是JavaScript

JSON.parse(text[, reviver])

text：要被解析成 JavaScript 值的字符串，若传入的字符串不符合 JSON 规范，则会抛出 SyntaxError 异常

• 对象和数组属性名称必须是双引号括起来的字符串；

JSON.parse('{"name" : "luck"}')
{name: "luck"}
JSON.parse('{name : luck}')
VM4520:1 Uncaught SyntaxError: Unexpected token n in JSON at position 1

• 对象最后一个属性后不能有逗号。

JSON.parse('{"age" : 18}')
// {age: 18}
JSON.parse('{"age" : 18, }')
// Uncaught SyntaxError: Unexpected token } in JSON at position 13

• 数值禁止出现前导零,会抛出 SyntaxError

JSON.parse('1')
// 1
JSON.parse('001')
VM4197:1 Uncaught SyntaxError: Unexpected number in JSON at position 1

• 数值如果有小数点, 则后面至少跟着一位数字

JSON.parse('1')
// 1
JSON.parse('1.')
// VM4263:1 Uncaught SyntaxError: Unexpected end of JSON input

• 字符串必须用双引号括起来

JSON.parse('"luck"')
"luck"
JSON.parse('luck')
VM4340:1 Uncaught SyntaxError: Unexpected token l in JSON at position 0

• 部分控制字符、转义字符不支持，如'\n'、'\t'等

JSON.parse('"8888\n"')
// Uncaught SyntaxError: Unexpected token

reviver参数

• 解析的值本身和它可能包含的所有属性，按照一定遍历顺序分别调用reviver函数，属性名和值作为参数两个参数 key 和 value 传入。

JSON.parse("{\"name\":\"luck\",\"age\":\"18\"}",(k,v) => {
    console.log(k,v)
    return v
})
// name luck
// age 18
// {name: "luck", age: "18"}

• 遍历顺序：按照层级，从内往外遍历，最终到达最顶层，则是解析值本身。

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

// 1
// 2
// 4
// 6
// 5
// 3
// ""

• reviver返回undefined，则删除该对象，如果返回了其他值，则该值会成为当前属性的新值。

let p = JSON.parse("{\"name\":\"luck\",\"age\":\"18\"}",(k,v) => {
    return undefined
})
console.log(p) // undefined

• 当遍历到最顶层时，因为没有属性了，参数key是空字符串''，参数value则是当前解析值。

let p = JSON.parse("{\"name\":\"luck\",\"age\":\"18\"}",(k,v) => {
    console.log(k)
    if (k === '') {
        v = '到达最顶层'
        return v
    }
    return v
})
// name
// age
// ''
// 到达最顶层
console.log(p)
// 到达最顶层

废话

雪崩的时候，每个参与其中开发者是都需要复盘的，锅大锅小都是锅，所以自己还是要谨小慎微一点，毕竟有些XX（开发自行理解）不是检测盾牌，而是筛子，是漏斗，兜不住任何问题。

减少对其他人的依赖，自己才能更强悍。