js 实现JSON.stringify 转化加格式化

快来打我* 2022-11-18 04:39 88阅读 0赞

//输入：
    var data = {
      a: 1,
      b: [2, 3, {
        c: 4
      }],
      d: {
        e: 5,
        f: {
          g: '6'
        },
      }
    }
    //输出：
    "{
      "a": 1,
      "b": [
          2,
          3,
          {
              "c": 4
          }
      ],
      "d": {
          "e": 5,
          "f": {
              "g": "6"
          }
      }
    }"

JSON.stringify的一些规则以及注意点:当对象为数字，null,boolean的时候，直接转换为相应的字符串就可以了。 但是string,function,undefined,object,array等，需要特殊处理。

1.undefined,该类型使用JSON.stringify处理的时候，如果对象就是undefined,将会输出"undefined",如果对象是数组的元素，那么将会变成null，比如:\[undefined\],stringify之后变成了"\[null\]";如果该对象是object的元素，那么该属性将当作不存在，不输出，比如\{a:1,b:undefined\},stringify之后是"\{\\"a\\":1\},B属性直接抛弃。

2.字符串在拼接的时候需要把内部的双引号处理掉

(function(NS){ 
      
      //简单类型 
      var simpleTypes = ["number", "boolean", "undefined", "string", "function"]; 
        
      //JSON.stringify的主函数 
      function stringify(object){ 
       var type = typeof object; 
         
       //如果是简单类型，则直接返回简单类型的结果 
       if(indexOf(simpleTypes, type) > -1){ 
        return parseSimpleObject(object); 
       } 
       
       //数组对象的 
       if(object instanceof Array){ 
        var len = object.length; 
        var resArr = []; 
        for(var i = 0; i < len; i++){ 
         var itemType = typeof object[i]; 
         if(indexOf(simpleTypes, itemType) > -1){ 
       
          //undefined特殊处理，数组中变成null 
          if(itemType != "undefined"){ 
           resArr.push(parseSimpleObject(object[i])); 
          }else{ 
           resArr.push("null"); 
          } 
            
         }else{ 
          //递归处理JS数组中的复杂元素 
          resArr.push(stringify(object[i])); 
         } 
        } 
          
        return "[" + resArr.join(",") + "]"; 
       } 
         
       //普通object对象 
       if(object instanceof Object){ 
        if(object == null){ 
         return "null"; 
        } 
          
        var resArr = []; 
          
        for(var name in object){ 
         var itemType = typeof object[name]; 
         if(indexOf(simpleTypes, itemType) > -1){ 
          //undefined特殊处理，object中不编码 
          if(itemType != "undefined"){ 
           resArr.push("\"" + name + "\":" + parseSimpleObject(object[name]));  
          } 
         }else{ 
          resArr.push("\"" + name + "\":" + stringify(object[name])); 
         } 
        } 
          
        return "{" + resArr.join(",") + "}"; 
       } 
      } 
        
      function parseSimpleObject(object){ 
       var type = typeof object; 
       if(type == "string" || type == "function"){ 
        return "\"" + object.toString().replace("\"", "\\\"") + "\""; 
       } 
         
       if(type == "number" || type == "boolean"){ 
        return object.toString(); 
       } 
         
       if(type == "undefined"){ 
        return "undefined"; 
       } 
         
       return "\"" + object.toString().replace("\"", "\\\"") + "\""; 
      } 
        
      function indexOf(arr, val){ 
       for(var i = 0; i < arr.length; i++){ 
        if(arr[i] === val){ 
         return i; 
        } 
       } 
         
       return -1; 
      } 
        
      /** 
       * 将stringify做二次封装 
       * @param object 要处理的对象 
       * 
       */
      NS.stringify = function(object, isEncodeZh){ 
       var res = stringify(object); 
       if(isEncodeZh){ 
        var encodeRes = ""; 
        for(var i = 0; i < res.length; i++){ 
         if(res.charCodeAt(i) < 0xff){ 
          encodeRes += res[i]; 
         }else{ 
          encodeRes += "\\u" + res.charCodeAt(i).toString(16); 
         } 
        } 
        res = encodeRes; 
       } 
         
       return res; 
      }; 
     })(window);

function repeat(s, count) {
        return new Array(count + 1).join(s)
      }
      function formatJson(json) {
        var i = 0,
          il = 0,
          tab = "    ",
          newJson = "",
          indentLevel = 0,
          inString = false,
          currentChar = null;
        for (i = 0, il = json.length; i < il; i += 1) {
          currentChar = json.charAt(i);
          switch (currentChar) {
            case '{':
            case '[':
              if (!inString) {
                newJson += currentChar + "\n" + repeat(tab, indentLevel + 1);
                indentLevel += 1
              } else {
                newJson += currentChar
              }
              break;
            case '}':
            case ']':
              if (!inString) {
                indentLevel -= 1;
                newJson += "\n" + repeat(tab, indentLevel) + currentChar
              } else {
                newJson += currentChar
              }
              break;
            case ',':
              if (!inString) {
                newJson += ",\n" + repeat(tab, indentLevel)
              } else {
                newJson += currentChar
              }
              break;
            case ':':
              if (!inString) {
                newJson += ": "
              } else {
                newJson += currentChar
              }
              break;
            case ' ':
            case "\n":
            case "\t":
              if (inString) {
                newJson += currentChar
              }
              break;
            case '"':
              if (i > 0 && json.charAt(i - 1) !== '\\') {
                inString = !inString
              }
              newJson += currentChar;
              break;
            default:
              newJson += currentChar;
              break
          }
        }
        return newJson
      }

测试：

var res = stringify(data);
    var res2 = formatJson(res);
    
    console.log(res2);

//对象转化成json串的精简版本
     function json2str(o) {
      let arr = [];
      const fmt = function(s) {
          if (typeof s == 'object' && s !== null) return json2str(s);
          return /^(string)$/.test(typeof s) ? `"${s}"`: s;
      }
      for (var i in o) arr.push(`"${i}": ${fmt(o[i])}`);
      return`{${arr.join(',')}}`
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，88人围观）

还没有评论，来说两句吧...

相关阅读

相关 js代码格式化(js代码格式化html标签)

可以分级的表格如何隐藏JS代码？【实例描述】分级的表格隐藏是指当用户单击第一行时，第一行后面的行都会隐藏；单击第二行时，则第二行下面的所有行会隐藏，依次类推。 ![j

快来打我*/ 2023年10月11日 18:48/ 0 赞/ 64 阅读

相关 js递归实现数组转化树状结构

<!DOCTYPE html> <html lang="en"> <head> <meta charse

骑猪看日落/ 2023年02月21日 04:50/ 0 赞/ 27 阅读

相关【前端】js实现金额数字格式化

方法一 abs = function(val){ //金额转换分->元保留2位小数并每隔3位用逗号分开 1,234.56

小鱼儿/ 2022年12月01日 05:13/ 0 赞/ 262 阅读

相关 js 实现JSON.stringify 转化加格式化

//输入： var data = { a: 1, b: [2, 3, { c: 4 }], d:

快来打我*/ 2022年11月18日 04:39/ 0 赞/ 89 阅读

相关 js实现数字转化为大写金额——js技能提升

最近在做超市系统，有个需求是根据数字，将对应的大写金额显示出来。 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_sh

约定不等于承诺〃/ 2022年09月09日 12:51/ 0 赞/ 464 阅读

相关 SpringMVC_数据转化、数据格式化、数据校验

一、数据绑定流程 1、SpringMVC 主框架将 ServletRequest 对象及目标方法的入参实例传给 WebDataBinderFactory 实例，以创建 D

港控/mmm°/ 2022年05月18日 03:09/ 0 赞/ 236 阅读

相关 js格式化时间

/ 格式化时间：yyyy-MM-dd HH:mm:ss @param {Object} time / function for

爱被打了一巴掌/ 2022年04月08日 18:23/ 0 赞/ 348 阅读

相关 js 时间格式化

//js时间对象的格式化; //eg:format="yyyy-MM-dd hh:mm:ss w"; Date.prototype.format = f

末蓝、/ 2022年03月31日 12:06/ 0 赞/ 349 阅读

相关 js字符串操作 --- 格式化银行卡中间加* *

var newbankNmbs = function(cardNumber) { if (cardNumber && cardNumber.lengt

悠悠/ 2021年10月25日 14:38/ 0 赞/ 368 阅读

相关 js如何实现时间的格式化

js如何实现时间的格式化 1、获取当前时间 var myDate = new Date(); 2、获取时间中的年月日时分秒

灰太狼/ 2020年06月07日 15:53/ 0 赞/ 727 阅读