[內(nèi)容首發(fā)公眾號(hào)，歡迎關(guān)注]
別讓API誤了你的KPI

JSON.stringify()和JSON.parse()都是日常開發(fā)過程中再也常見不過的api了， 但是近期出了2次客訴卻命中了這兩個(gè)API，當(dāng)然也存在測(cè)試case不全面的問題。

不是被一個(gè)倒霉蛋全部命中，但我覺得這兩個(gè)case可以總結(jié)下來，畢竟再簡(jiǎn)單的API，用到了權(quán)重高的項(xiàng)目里，出了bug，那也是個(gè)影響KPI的大事。

JSON.stringify()

第一個(gè)是前端與外站的合作，原本他們接受的是一個(gè)對(duì)象，用來渲染頁(yè)面上一個(gè)按鈕，和按鈕的點(diǎn)擊事件,參數(shù)為以下

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

由于底層框架升級(jí)，現(xiàn)在他們需要一個(gè)將原來接受的參數(shù)，轉(zhuǎn)成字符串的形式，所以前端直接將參數(shù)JSON.stringify()之后傳遞過去，由于一次性改動(dòng)的方法過多，涉及到btnClickFunc的也不多，也沒有特別注意，第二天就來了客訴，說點(diǎn)擊事件失效了... 然后就開始了緊急的排查...

點(diǎn)擊事件失效了，第一反應(yīng)就是傳遞的btnClickFunc失效了,debugger一看，帶有函數(shù)的參數(shù)JSON.stringify()以后，編程了這樣
"{\"title\":\"我的頁(yè)面\",\"isHide\":true,\"btnText\":\"完成\",\"btnTextEventTag\":\"page_finish\"}"

btnClickFunc沒了？是的、btnClickFunc沒了,后來解決方式就是JSON.stringify()之前，將btnClickFunc生成一個(gè)函數(shù)掛載到window上，將函數(shù)名作為參數(shù)的一部分再傳遞給對(duì)方，對(duì)方可以直接通過函數(shù)名調(diào)用函數(shù)。

API復(fù)習(xí)

JSON.stringify()將值轉(zhuǎn)換為相應(yīng)的JSON格式，資料來自JSON.stringify()：

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

value：將要序列化成 一個(gè)JSON字符串的JavaScript對(duì)象或值。

• 轉(zhuǎn)換值如果有 toJSON() 方法，該方法定義什么值將被序列化。

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

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

• 非數(shù)組對(duì)象的屬性不能保證以特定的順序出現(xiàn)在序列化后的字符串中。

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

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

• 布爾值、數(shù)字、字符串的包裝對(duì)象在序列化過程中會(huì)自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的原始值。

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

• undefined、任意的函數(shù)以及 symbol 值，在序列化過程中會(huì)被忽略（出現(xiàn)在非數(shù)組對(duì)象的屬性值中時(shí)）或者被轉(zhuǎn)換成 null（出現(xiàn)在數(shù)組中時(shí)）。函數(shù)、undefined 被單獨(dú)轉(zhuǎn)換時(shí)，會(huì)返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).

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

• 對(duì)包含循環(huán)引用的對(duì)象（對(duì)象之間相互引用，形成無限循環(huán)）執(zhí)行此方法，會(huì)拋出錯(cuò)誤。

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

• 所有以 symbol 為屬性鍵的屬性都會(huì)被完全忽略掉，即便 replacer 參數(shù)中強(qiáng)制指定包含了它們。

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

• Date 日期調(diào)用了 toJSON() 將其轉(zhuǎn)換為了 string 字符串（同Date.toISOString()），因此會(huì)被當(dāng)做字符串處理。

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

• NaN 和 Infinity 格式的數(shù)值及 null 都會(huì)被當(dāng)做 null。

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

• 其他類型的對(duì)象，包括 Map/Set/WeakMap/WeakSet，僅會(huì)序列化可枚舉的屬性。

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

replacer：

• 如果該參數(shù)是一個(gè)函數(shù)，則在序列化過程中，被序列化的值的每個(gè)屬性都會(huì)經(jīng)過該函數(shù)的轉(zhuǎn)換和處理；

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}

• 如果該參數(shù)是一個(gè)數(shù)組，則只有包含在這個(gè)數(shù)組中的屬性名才會(huì)被序列化到最終的 JSON 字符串中；

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

• 如果該參數(shù)為 null 或者未提供，則對(duì)象所有的屬性都會(huì)被序列化。

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

• space：
  指定縮進(jìn)用的空白字符串，用于美化輸出（pretty-print）；如果參數(shù)是個(gè)數(shù)字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格；如果該參數(shù)為字符串（當(dāng)字符串長(zhǎng)度超過10個(gè)字母，取其前10個(gè)字母），該字符串將被作為空格；如果該參數(shù)沒有提供（或者為 null），將沒有空格。

JSON.parse()

這個(gè)case的背景也是與外部門溝通有關(guān)，早上屁股還沒坐熱乎，某同學(xué)就接到客服反饋的錯(cuò)誤，說xx頁(yè)面白頁(yè)了，嚇的孩子臉都白了，白頁(yè)可是個(gè)大問題，又開始了緊急的排查

一看歷史記錄，這個(gè)頁(yè)面半年都沒有改動(dòng)，怎么會(huì)突然白了？

后來查看頁(yè)面，發(fā)現(xiàn)有一個(gè)報(bào)錯(cuò)SyntaxError:JSON Parse error: Unexpected EOF Stack:parse(native code)，那肯定是JSON Parse報(bào)錯(cuò)出錯(cuò)，最后排查是因?yàn)椋邮艿胶蠖私涌诜祷氐哪硞€(gè)字符串字段，然后前端JSON.parse()后再去渲染對(duì)應(yīng)頁(yè)面，但是因?yàn)榕c其他業(yè)務(wù)線共用接口，后端改了字符串返回 9F|0|0,導(dǎo)致JSON.parse('9F|0|0') js報(bào)錯(cuò)，影響了整個(gè)頁(yè)面渲染。

最后，因?yàn)閒e上線快，最后也是由fe做兼容。

這個(gè)雖然不直接是fe的鍋，但是如果對(duì)JSON.parse()的參數(shù)要求多嚴(yán)謹(jǐn)一下的話，還是要做些處理，最后解決就是try.cash

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

API復(fù)習(xí)

JSON 是一種語(yǔ)法，用來序列化對(duì)象、數(shù)組、數(shù)值、字符串、布爾值和 null 。它基于 JavaScript 語(yǔ)法，但與之不同：JavaScript不是SON，JSON也不是JavaScript

JSON.parse(text[, reviver])

text：要被解析成 JavaScript 值的字符串，若傳入的字符串不符合 JSON 規(guī)范，則會(huì)拋出 SyntaxError 異常

• 對(duì)象和數(shù)組屬性名稱必須是雙引號(hào)括起來的字符串；

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

• 對(duì)象最后一個(gè)屬性后不能有逗號(hào)。

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

• 數(shù)值禁止出現(xiàn)前導(dǎo)零,會(huì)拋出 SyntaxError

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

• 數(shù)值如果有小數(shù)點(diǎn), 則后面至少跟著一位數(shù)字

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

• 字符串必須用雙引號(hào)括起來

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

• 部分控制字符、轉(zhuǎn)義字符不支持，如'\n'、'\t'等

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

reviver參數(shù)

• 解析的值本身和它可能包含的所有屬性，按照一定遍歷順序分別調(diào)用reviver函數(shù)，屬性名和值作為參數(shù)兩個(gè)參數(shù) key 和 value 傳入。

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

• 遍歷順序：按照層級(jí)，從內(nèi)往外遍歷，最終到達(dá)最頂層，則是解析值本身。

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 輸出當(dāng)前的屬性名，從而得知遍歷順序是從內(nèi)向外的，
                    // 最后一個(gè)屬性名會(huì)是個(gè)空字符串。
    return v;       // 返回原始屬性值，相當(dāng)于沒有傳遞 reviver 參數(shù)。
});

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

• reviver返回undefined，則刪除該對(duì)象，如果返回了其他值，則該值會(huì)成為當(dāng)前屬性的新值。

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

• 當(dāng)遍歷到最頂層時(shí)，因?yàn)闆]有屬性了，參數(shù)key是空字符串''，參數(shù)value則是當(dāng)前解析值。

let p = JSON.parse("{\"name\":\"luck\",\"age\":\"18\"}",(k,v) => {
    console.log(k)
    if (k === '') {
        v = '到達(dá)最頂層'
        return v
    }
    return v
})
// name
// age
// ''
// 到達(dá)最頂層
console.log(p)
// 到達(dá)最頂層

廢話

雪崩的時(shí)候，每個(gè)參與其中開發(fā)者是都需要復(fù)盤的，鍋大鍋小都是鍋，所以自己還是要謹(jǐn)小慎微一點(diǎn)，畢竟有些XX（開發(fā)自行理解）不是檢測(cè)盾牌，而是篩子，是漏斗，兜不住任何問題。

減少對(duì)其他人的依賴，自己才能更強(qiáng)悍。