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

JSON.parse

JSON.parse 方法用來解析 JSON 字符串，構(gòu)造由字符串描述的 JavaScript 值或?qū)ο蟆Ｔ摲椒ㄓ袃蓚€參數(shù)：第一個參數(shù)是需要解析處理的 JSON 字符串，第二個參數(shù)是可選參數(shù)提供可選的 reviver 函數(shù)，用在返回之前對所得到的對象執(zhí)行變換操作。

該方法的語法為：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 /* 帶第二個參數(shù)的情況 */ JSON.parse('{"p": 5}', function (k, v) {if(k === '') return v; // 如果k不是空，return v * 2; // 就將屬性值變?yōu)樵瓉淼?倍返回 });

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

JSON.stringify

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

該方法的語法為：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]}" /* 第二個參數(shù)的例子 */ 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}" /* 第三個參數(shù)的例子 */ JSON.stringify({ a: 2 }, null, " "); /* "{"a": 2 }"*/ JSON.stringify({ a: 2 }, null, ""); // "{"a":2}"

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

那么如何手動實(shí)現(xiàn)JSON.stringify
?

function jsonStringify(data) {let type = typeof data;if(type !== 'object') {let result = data;//data 可能是基礎(chǔ)數(shù)據(jù)類型的情況在這里處理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 = [];//如果是數(shù)組，那么數(shù)組里面的每一項(xiàng)類型又有可能是多樣的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, '"');}}}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。