手动实现JSON.stringify

最新推荐文章于 2024-04-04 14:45:00 发布

hh__

最新推荐文章于 2024-04-04 14:45:00 发布

阅读量491

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/xch____/article/details/123793724

版权

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, '"');

        }

    }

}