不用JSON.stringify怎么将json对象转为json字符串

JYeontu
208 阅读2分钟

说在前面

平时大家都是怎么将json对象转为json字符串的？大部分同学应该都是直接使用内置的 JSON.stringify 函数来进行转换的吧？今天我们一起来看看不用JSON.stringify怎么将json对象转为json字符串。

需求

现给定一个值，返回该值的有效 JSON 字符串。你可以假设这个值只包括字符串、整数、数组、对象、布尔值和 null。返回的字符串不能包含额外的空格。键的返回顺序应该与 Object.keys() 的顺序相同。

在不使用内置方法 JSON.stringify 的前提下解决这个问题。

示例

示例 1

输入：object = {"y":1,"x":2}
输出：{"y":1,"x":2}
解释：
返回该对象的 JSON 表示形式。
注意，键的返回顺序应该与 Object.keys() 的顺序相同。

示例 2

输入：object = {"a":"str","b":-12,"c":true,"d":null}
输出：{"a":"str","b":-12,"c":true,"d":null}
解释：
JSON 的基本类型是字符串、数字型、布尔值和 null。

示例 3

输入：object = {"key":{"a":1,"b":[{},null,"Hello"]}}
输出：{"key":{"a":1,"b":[{},null,"Hello"]}}
解释：
对象和数组可以包括其他对象和数组。

示例 4

输入：object = true
输出：true
解释：
基本类型是有效的输入

逻辑分析

基础类型处理

  • 处理 null：如果输入的 object 是 null，直接返回字符串 "null"，这是JSON格式中对 null 的标准表示方式。
  • 处理字符串类型：当 object 是字符串类型时，通过将其用双引号括起来的方式返回符合JSON规范的字符串表示，即返回 "${object}"。例如，输入 "hello"，则返回 "\"hello\""。
  • 处理非对象类型（除字符串外）：如果 object 的类型不是对象（通过 typeof 判断），这里排除了已经单独处理的字符串类型，那么就直接将其转换为字符串并返回。例如，对于数字 5，会返回 "5"；对于布尔值 true，会返回 "true"。

数组类型处理

  • 首先通过 Array.isArray 函数进行判断输入的 object 是否为数组。如果是数组，就遍历数组中的每个元素 item。
  • 在遍历过程中，对于每个元素 item：
    • 如果 res（用于拼接最终结果字符串的变量）已经有内容了（即不是空字符串），就先在 res 后面添加一个逗号 ,，用于分隔不同的元素。
    • 然后递归调用 jsonStringify 函数将当前元素 item 转换为符合JSON格式的字符串，并将其添加到 res 中。
  • 最后，将拼接好所有元素的字符串 res 用方括号 [ 和 ] 括起来并返回，形成一个符合JSON格式的数组字符串表示。例如，对于数组 [1, "two", {three: 3}]，会逐步将每个元素转换并拼接，最终返回 "[1,\"two\",{\"three\":3}]"。

对象类型处理

  • 如果输入的 object 既不是基本类型（除字符串外）也不是数组类型，那么就认为它是普通对象类型。
  • 对于对象类型，通过 for...in 循环遍历对象的所有键 key。
  • 在遍历过程中，对于每个键 key：
    • 同样，如果 res 已经有内容了，就在 res 后面添加一个逗号 ,。
    • 分别递归调用 jsonStringify 函数将键 key 和对应的值 object[key] 转换为符合JSON格式的字符串，然后按照JSON规范的格式（键与值之间用冒号 : 分隔）将它们拼接起来，即 ${jsonStringify(key)}:${jsonStringify(object[key])}，并将拼接结果添加到 res 中。
  • 最后，将拼接好所有键值对的字符串 res 用花括号 { 和 },括起来并返回，形成一个符合JSON格式的对象字符串表示。例如，对于对象 {name: "John", age: 30}，会逐步将每个键值对转换并拼接，最终返回 "{"name":"John","age":30}"。

完整代码

/**
 * @param {null|boolean|number|string|Array|Object} object
 * @return {string}
 */
const jsonStringify = function (object) {
  if (object === null) return "null";
  if (typeof object === "string") return `"${object}"`;
  if (typeof object !== "object") return object + "";
  let res = "";
  if (Array.isArray(object)) {
    object.forEach((item) => {
      if (res) res += ",";
      res += jsonStringify(item);
    });
    return `[${res}]`;
  }
  for (const key in object) {
    if (res) res += ",";
    res += `${jsonStringify(key)}:${jsonStringify(object[key])}`;
  }
  return `{${res}}`;
};

测试

jsonStringify({"a":"str","b":-12,"c":true,"d":null});
//{"a":"str","b":-12,"c":true,"d":null}


jsonStringify({"key":{"a":1,"b":[{"c":"cc"},null,"Hello"]}});
//{"key":{"a":1,"b":[{"c":"cc"},null,"Hello"]}}


jsonStringify(true);
//true


jsonStringify("true");
//"true"

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

avatar
文章
阅读
粉丝