【js常用polyfill】（二）JSON对象|原生js实现JSON.parse()和JSON.stringify()

最新推荐文章于 2025-07-29 11:01:15 发布

原创最新推荐文章于 2025-07-29 11:01:15 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#polyfill #js #json

polyfill 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了JSON的解析和序列化方法，包括JSON.parse()和JSON.stringify()的使用，以及如何在旧版浏览器中实现这些功能。通过自定义代码，即使在不支持JSON对象的环境中也能实现数据的正确转换。

文章目录

- - 一、完整代码
  - 二、解析

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法
JSON对象包含两个方法:
用于解析 JavaScript Object Notation (JSON) 的 JSON.parse() 方法，
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
以及将对象/值转换为 JSON字符串的 JSON.stringify() 方法。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

一、完整代码

JSON对象可能不被老版本的浏览器支持。可以将下面的代码放到JS脚本最开始的位置，这样就可以在没有原生支持 JSON 对象的浏览器（如IE6）中使用 JSON对象。

if (!window.JSON) {//判断window对象下没有json对象时，挂载自定义的json对象
  window.JSON = {
  	...
    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
    stringify: (function () {
      var toString = Object.prototype.toString;
      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
      return function stringify(value) {
        if (value == null) {
          return 'null';
        } else if (typeof value === 'number') {
          return isFinite(value) ? value.toString() : 'null';
        } else if (typeof value === 'boolean') {
          return value.toString();
        } else if (typeof value === 'object') {
          if (typeof value.toJSON === 'function') {
            return stringify(value.toJSON());
          } else if (isArray(value)) {
            var res = '[';
            for (var i = 0; i < value.length; i++)
              res += (i ? ', ' : '') + stringify(value[i]);
            return res + ']';
          } else if (toString.call(value) === '[object Object]') {
            var tmp = [];
            for (var k in value) {
              if (value.hasOwnProperty(k))
                tmp.push(stringify(k) + ': ' + stringify(value[k]));
            }
            return '{' + tmp.join(', ') + '}';
          }
        }
        return '"' + value.toString().replace(escRE, escFunc) + '"';
      };
    })()
  };
}

二、解析

使用eval实现parse方法：

 parse: function(sJSON) { return eval('(' + sJSON + ')'); },

思路：
使用立即执行函数+闭包实现stringify方法

定义了一些闭包变量，比如数组对象类型判断isArray/toString，在执行的时候调用
基础类型的转化
对象类型的转化
- 函数
- 数组：对每一个数组值递归调用，进行转化
- 对象：遍历自身可枚举属性，对属性key和value递归调用自身，然后将拼接字符串放入数组，最后将数组使用join和大括号拼接起来
转成字符串，替换，加上首尾两个引号，输出

 stringify: (function () {
      var toString = Object.prototype.toString;
      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
      return function stringify(value) {
        if (value == null) {
          return 'null';
        } else if (typeof value === 'number') {
          return isFinite(value) ? value.toString() : 'null';
        } else if (typeof value === 'boolean') {
          return value.toString();
        } else if (typeof value === 'object') {
          if (typeof value.toJSON === 'function') {
            return stringify(value.toJSON());
          } else if (isArray(value)) {
            var res = '[';
            for (var i = 0; i < value.length; i++)
              res += (i ? ', ' : '') + stringify(value[i]);
            return res + ']';
          } else if (toString.call(value) === '[object Object]') {
            var tmp = [];
            for (var k in value) {
              if (value.hasOwnProperty(k))
                tmp.push(stringify(k) + ': ' + stringify(value[k]));
            }
            return '{' + tmp.join(', ') + '}';
          }
        }
        return '"' + value.toString().replace(escRE, escFunc) + '"';
      };
    })()