JSON.stringify()实现原理

最新推荐文章于 2024-08-20 16:38:07 发布

gtLBTNq9mr3

最新推荐文章于 2024-08-20 16:38:07 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/gtLBTNq9mr3/article/details/106393769

版权

JSON 的语法可以表示以下三种类型的值。

1、简单值：使用与 JavaScript 相同的语法，可以在JSON 中表示字符串、数值、布尔值和 null。但JSON 不支持 JavaScript 中的特殊值 undefined。

2、对象：对象作为一种复杂数据类型，表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值。

3、数组：数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单值、对象或数组。

JSON 不支持变量、函数或对象实例，它就是一种表示结构化数据的格式，虽然与JavaScript 中表示数据的某些语法相同，但它并不局限于JavaScript 的范畴。

let myObj = {
  undef: undefined,
  bool: false,
  fun: function(){},
  date: new Date(),
  arr: [1, 2],
  obj: {a: 1, b: 2},
  reg: /\d/,
  sym: Symbol(),
  nul: null,
  set: new Set(),
  map: new Map()
}
console.log(JSON.stringify(myObj))


// {"bool":false,"date":"2020-05-27T03:22:47.587Z","arr":[1,2],"obj":{"a":1,"b":2},"reg":{},"nul":null,"set":{},"map":{}}

这个例子使用 JSON.stringify() 把一个JavaScript 对象序列化为一个JSON 字符串，现在，我们已经了解了 JSON.stringify() 方法的输出以及它的工作方式，让我们从序列化值开始实现它。

序列化值，首先，我们将从以下数据类型开始。

1、undefined

2、number

3、boolean

4、string

function stringify(value) {
  // 参数类型
  var type = typeof value;


  function getValues(value) {
    if (type === "undefined") {
      return undefined;
    }


    if (type === "number" || type === "boolean") {
      return "" + value + "";
    }


    if (type === "string") {
      return '"' + value + '"';
    }
  }


  return getValues(value);
}


console.log(stringify(1)); // "1"
console.log(stringify("abc")); // ""abc""
console.log(stringify(true)); // "true"


// 这里是 undefined 而不是 "undefined"
console.log(stringify(undefined) === JSON.stringify(undefined)); // true

到目前为止，上述功能是比较简单。它所做的只是用引号把值引起来，但是 undefined 并不需要转换为字符串，而是直接返回 undefined 数据类型。

现在，我们将添加对更多数据类型的支持，例如

1、array

2、object

3、null

4、date

5、functions (methods)

为了支持数组和对象，我们应该解析属性之间的多层嵌套。我们必须递归地处理子元素并序列化值。

对于数组而言，它非常简单，请使用一个开括号和一个闭括号对数组进行迭代，然后调用该stringify()函数，然后依次调用该getValues()函数并重复进行，直到所有值都考虑在内。

但是对于对象，我们需要使用对象字面量的左，右括号将值和属性都进行序列化。

对于日期对象，还有一件有趣的事情，JSON.stringify()方法返回的值为 ISO 8601 日期字符串（与在Date对象上调用toISOString()的结果完全一样）。

function stringify(value) {
  var type = typeof value;


  function getValues(value) {
    if (type === "symbol" || type === "undefined" || type === "function") {
      return undefined;
    }


    if (type === "number" || type === "boolean") {
      return "" + value + "";
    }


    if (type === "string") {
      return '"' + value + '"';
    }
  }


  // 对于对象数据类型
  // 在javascript中，数组和对象都是对象
  if (type === "object") {


    // 检查值是否为null
    if (!value) {
      return "" + value + "";
    }


    // 检查值是否为日期对象
    if (value instanceof Date) {
      return '"' + new Date(value).toISOString() + '"'; // 返回ISO 8601日期字符串
    }


    // 检查值是否为Array
    if (value instanceof Array) {
      return "[" + value.map(stringify) + "]"; // 递归调用stringify函数


    } else {
      // 递归调用stringify函数
      return (
        "{" +
        Object.keys(value).map(
          key => {
            let result = stringify(value[key])
            if (result === undefined) {
              return undefined
            }
            return '"' + key + '"' + ":" + result
          }
        ).filter(item => item !== undefined) +
        "}"
      );
    }
  }


  return getValues(value);
}


console.log(stringify([1, 2, 3])); // "[1,2,3]"
console.log(stringify(new Date())); // 返回日期字符串
console.log(stringify({ a: 1 })); // "{"a":1}"

上面的函数现在适用于所有数据类型，并且输出与 JSON.stringify() 方法相同。

实际上，JSON.stringify() 除了要序列化的 JavaScript 对象外，还可以接收另外两个参数，这两个参数用于指定以不同的方式序列化 JavaScript 对象。第一个参数是个过滤器，可以是一个数组，也可以是一个函数；第二个参数是一个选项，表示是否在 JSON 字符串中保留缩进。单独或组合使用这两个参数，可以更全面深入地控制 JSON 的序列化。（这里实现的代码暂时不支持这两个参数）

与 JavaScript 不同，JSON 中对象的属性名任何时候都必须加双引号。手工编写 JSON 时，忘了给对象属性名加双引号或者把双引号写成单引号都是常见的错误。

如果对象中有 undefined，那么相应的属性会被忽略。

现在你已经了解了 JSON 在格式化数据的时候转换过程是怎样的，因为 JSON 对有些数据类型是不支持的，所以不建议大家使用 JSON 进行对象的深度克隆

JSON.parse(JSON.stringify(obj))

如果你需要用到深度克隆，可以参考下面的写法：

function deepClone (obj, hash = new WeakMap()) {
  if (obj == null) return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (typeof obj === 'symbol') {
    let desc = obj.description
    return desc ? Symbol(desc) : Symbol()
  }
  if (typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);
  let cloneObj = new obj.constructor;
  hash.set(obj, cloneObj);
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = obj[key];
    }
  }
  return cloneObj;
}

上面代码使用了 WeakMap 数据结构来解决循环引用的问题，使用 JSON 拷贝循环引用的对象是会报错的，我们先了解一下什么是循环引用，也就是对象的某个属性引用对象本身。