最近在做 Node 服務(wù)端需求的時(shí)候，遇到了幾次服務(wù)端報(bào)錯(cuò)的問(wèn)題。打 log 發(fā)現(xiàn)均是一些 Error，但是它們都沒(méi)法很好地透?jìng)鹘o前端瀏覽器，出現(xiàn)問(wèn)題只能查看服務(wù)端機(jī)器的日志，調(diào)試起來(lái)非常不方便。思考了一下，服務(wù)端的內(nèi)容都是通過(guò) JSON.stringify() 處理，然后設(shè)置 Content-type: text/json 的響應(yīng)頭以后再傳給前端的，如果 Error 也能夠被這樣處理，那么調(diào)試起來(lái)就方便多了。

舉個(gè)例子

說(shuō)到 JSON.stringify() 這個(gè)方法，相信所有玩過(guò) JS 的同學(xué)都不會(huì)陌生。它能夠方便地把一個(gè)對(duì)象轉(zhuǎn)化成字符串，在不同的場(chǎng)景中都有著極大的用處。但是它也有一個(gè)較大的缺點(diǎn)，無(wú)法直接處理諸如 Error 一類(lèi)的對(duì)象。

首先來(lái)看個(gè)例子：

const err = new Error('This is an error') JSON.stringify(err) // => "{}" 

在控制臺(tái)運(yùn)行上述代碼后會(huì)發(fā)現(xiàn)，JSON.stringify() 的結(jié)果是一個(gè)字符串的 "{}"，里面沒(méi)有任何有效內(nèi)容。這是否意味著 JSON.stringify() 確實(shí)無(wú)法處理 Error 呢？下面我們來(lái)看看在 MDN 里這個(gè)函數(shù)是如何定義的。

MDN 定義

首先來(lái)看看描述

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

• 轉(zhuǎn)換值如果有toJSON()方法，該方法定義什么值將被序列化。
• 非數(shù)組對(duì)象的屬性不能保證以特定的順序出現(xiàn)在序列化后的字符串中。
• 布爾值、數(shù)字、字符串的包裝對(duì)象在序列化過(guò)程中會(huì)自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的原始值。
• undefined、任意的函數(shù)以及 symbol 值，在序列化過(guò)程中會(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).
• 對(duì)包含循環(huán)引用的對(duì)象（對(duì)象之間相互引用，形成無(wú)限循環(huán)）執(zhí)行此方法，會(huì)拋出錯(cuò)誤。
• 所有以 symbol 為屬性鍵的屬性都會(huì)被完全忽略掉，即便 replacer 參數(shù)中強(qiáng)制指定包含了它們。
• Date日期調(diào)用了toJSON()將其轉(zhuǎn)換為了string字符串（同Date.toISOString()），因此會(huì)被當(dāng)做字符串處理。
• NaN和Infinity格式的數(shù)值及null都會(huì)被當(dāng)做null。
• 其他類(lèi)型的對(duì)象，包括Map/Set/weakMap/weakSet，僅會(huì)序列化可枚舉的屬性。

列了那么多其實(shí)是為了湊字?jǐn)?shù)我們只看最后一條描述：

其他類(lèi)型的對(duì)象，包括Map/Set/weakMap/weakSet，僅會(huì)序列化可枚舉的屬性。

“僅會(huì)序列化可枚舉的屬性”，是什么意思呢？眾所周知，在 JS 的世界中一切皆對(duì)象，對(duì)象有著不同的屬性，這些屬性是否可枚舉，我們用 enumerable 來(lái)定義。

對(duì)象屬性的 enumerable

舉個(gè)例子，我們用 obj = { a: 1, b: 2, c: 3 } 來(lái)定義一個(gè)對(duì)象，然后設(shè)置它的 c 屬性為“不可枚舉”，看看效果會(huì)如何：

首先看處理前的效果：

const obj = { a: 1, b: 2, c: 3 } JSON.stringify(obj) // => "{"a":1,"b":2,"c":3}" 

再看處理后的效果：

const obj = { a: 1, b: 2, c: 3 } Object.defineProperty(obj, 'c', { value: 3, enumerable: false }) JSON.stringify(obj) // => "{"a":1,"b":2}" 

可以看到，在對(duì) c 屬性設(shè)置為不可枚舉以后，JSON.stringify() 便不再對(duì)其進(jìn)行序列化。

我們把問(wèn)題再深入一些，有沒(méi)有辦法能夠獲取一個(gè)對(duì)象中包含不可枚舉在內(nèi)的所有屬性呢？答案是使用 Object.getOwnPropertyNames() 方法。

依然是剛剛被改裝過(guò)的 obj 對(duì)象，我們來(lái)看看它所包含的所有屬性：

Object.getOwnPropertyNames(obj) // => ["a", "b", "c"] 

不可枚舉的 c 屬性也被獲取到了！

用同樣的方法，我們來(lái)看看一個(gè) Error 都包含哪些屬性：

const err = new Error('This is an error') Object.getOwnPropertyNames(err) // => ["stack", "message"] 

可以看到，Error 包含了 stack 和 message 兩個(gè)屬性，它們均可以使用點(diǎn)運(yùn)算符 . 從 err 實(shí)例里面拿到。

既然我們已經(jīng)能夠獲取 Error 實(shí)例的不可枚舉屬性及其內(nèi)容，那么距離使用 JSON.stringify() 序列化 Error 也已經(jīng)不遠(yuǎn)了！

JSON.stringify() 的第二個(gè)參數(shù)

JSON.stringify() 可以接收三個(gè)參數(shù)：

語(yǔ)法

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

value

將要序列化成 一個(gè)JSON 字符串的值。

replacer 可選

如果該參數(shù)是一個(gè)函數(shù)，則在序列化過(guò)程中，被序列化的值的每個(gè)屬性都會(huì)經(jīng)過(guò)該函數(shù)的轉(zhuǎn)換和處理；如果該參數(shù)是一個(gè)數(shù)組，則只有包含在這個(gè)數(shù)組中的屬性名才會(huì)被序列化到最終的 JSON 字符串中；如果該參數(shù)為null或者未提供，則對(duì)象所有的屬性都會(huì)被序列化。

space 可選

指定縮進(jìn)用的空白字符串，用于美化輸出（pretty-print）；如果參數(shù)是個(gè)數(shù)字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒(méi)有空格；如果該參數(shù)為字符串(字符串的前十個(gè)字母)，該字符串將被作為空格；如果該參數(shù)沒(méi)有提供（或者為null）將沒(méi)有空格。 返回值 節(jié) 一個(gè)表示給定值的JSON字符串。

我們來(lái)看 replacer 的用法：

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

依然使用上文的 obj 為例子：

const obj = { a: 1, b: 2, c: 3 } Object.defineProperty(obj, 'c', { value: 3, enumerable: false }) JSON.stringify(obj, ['a', 'c']) // => "{"a":1,"c":3}" 

可以看到，我們?cè)?replacer 中指定了要序列化 a 和 c 屬性，輸出結(jié)果也是只有這兩個(gè)屬性的值，且不可枚舉的 c 屬性也被序列化了！守得云開(kāi)見(jiàn)月明，Error 對(duì)象被序列化的方法也就出來(lái)了：

const err = new Error('This is an error') JSON.stringify(err, Object.getOwnPropertyNames(err), 2) // => // "{ // "stack": "Error: This is an error\n at <anonymous>:1:13", // "message": "This is an error" // }" 

后記

文章本來(lái)的標(biāo)題是“你不知道的 JSON.stringify()”，但是總感覺(jué)詞不達(dá)意，有標(biāo)題黨的嫌疑，遂改成更為實(shí)在的現(xiàn)標(biāo)題。

對(duì)于一些常用的函數(shù)，其背后也有著許多值得探索的內(nèi)容，比如這次為了讓 JSON.stringify() 去序列化一個(gè) Error，我又復(fù)習(xí)了一遍 JS 對(duì)象屬性中 enumerable 的相關(guān)知識(shí)，才知道這些原本以為很底層的基礎(chǔ)知識(shí)其實(shí)對(duì)真實(shí)業(yè)務(wù)也有著巨大的作用。夯實(shí)基礎(chǔ)，永遠(yuǎn)都是很重要的。

到此這篇關(guān)于使用 JSON.stringify() 列化一個(gè)Error的文章就介紹到這了,更多相關(guān)使用 JSON.stringify() 列化一個(gè)Error內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論