JSON.stringify 是日常開發中經常用到的 JSON 對象中的一個方法，JSON 對象包含兩個方法：一是用于解析成 JSON 對象的 parse()；二是用于將對象轉換為 JSON 字符串方法的 stringify()。下面我們分別來看下兩個方法的基本使用情況。

JSON.parse

JSON.parse 方法用來解析 JSON 字符串，構造由字符串描述的 JavaScript 值或對象。該方法有兩個參數：第一個參數是需要解析處理的 JSON 字符串，第二個參數是可選參數提供可選的 reviver 函數，用在返回之前對所得到的對象執行變換操作。

該方法的語法為：JSON.parse(text[, reviver])

用法如下圖所示：

const json = '{"result":true, "count":2}'; const obj = JSON.parse(json); console.log(obj.count); // 2 console.log(obj.result); // true /* 帶第二個參數的情況 */ JSON.parse('{"p": 5}', function (k, v) {if(k === '') return v; // 如果k不是空，return v * 2; // 就將屬性值變為原來的2倍返回 });

上面的代碼說明了，我們可以將一個符合 JSON 格式的字符串轉化成對象返回；帶第二個參數的情況，可以將待處理的字符串進行一定的操作處理，比如上面這個例子就是將屬性值乘以 2 進行返回。

JSON.stringify

JSON.stringify 方法是將一個 JavaScript?對象或值轉換為 JSON 字符串，默認該方法其實有三個參數：第一個參數是必選，后面兩個是可選參數非必選。第一個參數傳入的是要轉換的對象；第二個是一個 replacer 函數，比如指定的?replacer 是數組，則可選擇性地僅處理包含數組指定的屬性；第三個參數用來控制結果字符串里面的間距，后面兩個參數整體用得比較少。

該方法的語法為：JSON.stringify(value[, replacer [, space]])

?用法如下圖所示：

JSON.stringify({ x: 1, y: 2 }); // "{"x":1,"y":2}" JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }) // "{"x":[10,null,null,null]}" /* 第二個參數的例子 */ function replacer(key, value) {if (typeof value === "string") {return undefined;}return value; } var foo = {foundation: "Mozilla", model: "box", week: 4, transport: "car", month: 7}; var jsonString = JSON.stringify(foo, replacer); console.log(jsonString); // "{"week":4,"month":7}" /* 第三個參數的例子 */ JSON.stringify({ a: 2 }, null, " "); /* "{"a": 2 }"*/ JSON.stringify({ a: 2 }, null, ""); // "{"a":2}"

從上面的代碼中可以看到，增加第二個參數 replacer 帶來的變化：通過替換方法把對象中的屬性為字符串的過濾掉，在 stringify 之后返回的僅為數字的屬性變成字符串之后的結果；當第三個參數傳入的是多個空格的時候，則會增加結果字符串里面的間距數量，從最后一段代碼中可以看到結果。

那么如何手動實現JSON.stringify
?

function jsonStringify(data) {let type = typeof data;if(type !== 'object') {let result = data;//data 可能是基礎數據類型的情況在這里處理if (Number.isNaN(data) || data === Infinity) {//NaN 和 Infinity 序列化返回 "null"result = "null";} else if (type === 'function' || type === 'undefined' || type === 'symbol') {// 由于 function 序列化返回 undefined，因此和 undefined、symbol 一起處理return undefined;} else if (type === 'string') {result = '"' + data + '"';}return String(result);} else if (type === 'object') {if (data === null) {return "null" // 第01講有講過 typeof null 為'object'的特殊情況} else if (data.toJSON && typeof data.toJSON === 'function') {return jsonStringify(data.toJSON());} else if (data instanceof Array) {let result = [];//如果是數組，那么數組里面的每一項類型又有可能是多樣的data.forEach((item, index) => {if (typeof item === 'undefined' || typeof item === 'function' || typeof item === 'symbol') {result[index] = "null";} else {result[index] = jsonStringify(item);}});result = "[" + result + "]";return result.replace(/'/g, '"');} else {// 處理普通對象let result = [];Object.keys(data).forEach((item, index) => {if (typeof item !== 'symbol') {//key 如果是 symbol 對象，忽略if (data[item] !== undefined && typeof data[item] !== 'function' && typeof data[item] !== 'symbol') {//鍵值如果是 undefined、function、symbol 為屬性值，忽略result.push('"' + item + '"' + ":" + jsonStringify(data[item]));}}});return ("{" + result + "}").replace(/'/g, '"');}}}

總結

以上是生活随笔為你收集整理的手动实现JSON.stringify的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。