module1-06-实现JSON.stringify

实现JSON.stringify

  • 实现 JSON.stringify 这个方法,是考察对JS各种数据类型的深度,提高处理各种极端的边界情况的处理能力

  • 先介绍JSON对象的两个方法。

    • ① JSON.parse

    • ② JSON.stringify

一、JSON.parse

  • 这个用来解析JSON字符串,结构由字符串描述的 js 值或对象。该方法有两个参数:第一个参数是需要解析处理的 JSON 字符串,第二个参数是可选参数提供可选的 reviver 函数,用在返回之前对所得到的对象执行变换操作

    • 语法为: JSON.parse(text[, reviver])

  • 其中第二个参数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倍返回
});                            // { p: 10 }

二、JSON.stringify

  • 这个方法是将一个JavaScript对象或值转换为JSON字符串

    • 参数:

      • ① 必选,需要转换的对象

      • ② replacer,如果replacer的是数组,则选择性地处理包含数组制定的属性

      • ③ 控制结果字符串里面的间距

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}"
  • 那么如何自己动手实现呢?

    • 在实现之前,首先要了解这个方法解析的时候的处理原则

  • 代码实现

function myStringify (obj) {
 if (typeof obj !== 'object') {
   let result = obj
   if (typeof obj === 'symbol' || typeof obj === 'undefined' || typeof obj === 'function') {
     return undefined;
  } else if (obj === Infinity || obj === Infinity || Number.isNaN(obj)) {
     return 'null';
  } else if (typeof obj === 'string') {
     result = '\"' + obj + '\"';
  }
   return String(result)
} else if (typeof obj === 'object') {
   // 为null的情况
   if (obj === null) {
     return 'null';
  } else if (obj.toJSON && typeof obj.toJSON === 'function') {
     return myStringify(obj.toJSON());
  } else if (obj instanceof Array) {
     let result = [];

     obj.forEach((item, index) => {
       if (typeof item === 'function' || typeof item === 'undefined' || typeof item === 'symbol') {
         result[index] = "null";
      } else {
         result[index] = myStringify(item)
      }
    })
     return ('[' + result + ']').replace(/\'/g, '\"');
  } else if (obj instanceof RegExp) {
     return "{}";
  } else {
     let result = []
     // 为object的情况
     Object.keys(obj).forEach((key, index) => {
       if (typeof key !== 'symbol') { // key为symbol的话忽略
         if (obj[key] !== undefined && typeof obj[key] !== 'function' && typeof obj[key] !== 'symbol') {
           // 忽略undefined function symbol
           result.push('"' + key + '"' + ':' + myStringify(obj[key]));
        }
      }
    })
     return ('{' + result + '}').replace(/\'/g, '\"')
  }
}
}

 

posted @ 2021-02-27 15:09  叻仔猪  阅读(76)  评论(0编辑  收藏  举报