理解JSON.stringify()高级用法

Posted 2021-01-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了理解JSON.stringify()高级用法相关的知识，希望对你有一定的参考价值。

一：JSON.stringify()

该方法是把javascript对象转换成json字符串。

基本语法：JSON.stringify(value, [, replacer], [, space])

value: 必选字段，指输入的对象，比如数组这些。
replacer，该参数是可选的，它可以有两种类型，第一种是数组，第二种是函数方法。

space: 该参数的含义是指使用什么来做分隔符的。
1）如果该参数省略的话，那么显示出来的值是没有分隔符的。
2）如果是一个数字的话，那么它的含义是缩进几个字符的意思，最大值为10.
3）如果是一个转义字符的话，比如 ‘ ‘, 表示回车，那么它每行一个回车。
4）如果是字符串的话，那么每行输出值的时候把这些字符串附加上去，最大长度也是10个字符。

下面是一个简单的json对象，如下代码：

var json = {
  "name": "kongzhi",
  "age": "30",
  "lists": [
    {"name": "xxx1", "age": "28"},
    {"name": "xxx2", "age": "29"},
    {"name": "xxx3", "age": "30"}
  ]
};

1) 只有一个参数值的情况下；如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var result = JSON.stringify(json);
      // 输出结果为 {"name":"kongzhi","age":"30","lists":[{"name":"xxx1","age":"28"},{"name":"xxx2","age":"29"},{"name":"xxx3","age":"30"}]}
      console.log(result);
    </script>
  </body>
</html>

2.1）第二个参数存在，且第二个参数是数组。

如果第二个参数是数组，并且第二个参数的值在第一个数据中存在的话，那么它就会以第二个参数的值当做key，第一个参数的值为value表示。如果第二个参数数组有多项的话，以此类推...，如果不匹配数据的话，则忽略。如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var arrs = [‘lists‘, ‘name‘];
      var result = JSON.stringify(json, arrs);
      // 输出结果为 {"lists":[{"name":"xxx1"},{"name":"xxx2"},{"name":"xxx3"}],"name":"kongzhi"}
      console.log(result);
    </script>
  </body>
</html>

2.2）第二个参数存在，且第二个参数是方法

如果第二个参数是一个方法的话，那么该函数会有两个参数，key和value，我们可以在函数内部改变json数据的值，如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var result = JSON.stringify(json, function(key, value) {
        switch(key) {
          case "name":
            return ‘longen‘;
          case "age":
            return ‘31‘;
          default:
            return value;
        }
      });
      // 输出结果为 {"name":"longen","age":"31","lists":[{"name":"longen","age":"31"},{"name":"longen","age":"31"},{"name":"longen","age":"31"}]}
      console.log(result);
    </script>
  </body>
</html>

3）第三个参数存在

第二个参数如果不传的话，可以写null, 第三个参数是控制json字符串缩进的，它可以是数字或字符串，数字最多可以缩进10个，如果传入的是字符串的话，则会使用这个字符串当做缩进符来代替空格。

3.1 数字（控制json字符串缩进的，几个数字代表几个缩进）如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var result = JSON.stringify(json, null, 4);
      /*  
        输出结果为：
        {
            "name": "kongzhi",
            "age": "30",
            "lists": [
                {
                    "name": "xxx1",
                    "age": "28"
                },
                {
                    "name": "xxx2",
                    "age": "29"
                },
                {
                    "name": "xxx3",
                    "age": "30"
                }
            ]
        }
      */
      console.log(result);
    </script>
  </body>
</html>

3.2 字符串（控制json字符串缩进的，字符串的话，则会使用这个字符串当做缩进符来代替空格），如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var result = JSON.stringify(json, null, ‘aa‘);
      /*  
        输出结果为：
        {
        aa"name": "kongzhi",
        aa"age": "30",
        aa"lists": [
        aaaa{
        aaaaaa"name": "xxx1",
        aaaaaa"age": "28"
        aaaa},
        aaaa{
        aaaaaa"name": "xxx2",
        aaaaaa"age": "29"
        aaaa},
        aaaa{
        aaaaaa"name": "xxx3",
        aaaaaa"age": "30"
        aaaa}
        aa]
        }
      */
      console.log(result);
    </script>
  </body>
</html>

以上是关于理解JSON.stringify()高级用法的主要内容，如果未能解决你的问题，请参考以下文章

JSON.parse()和JSON.stringify()用法

JSON对象的解析，JSON.stringify()/JSON.parse()的用法

JSON.stringify()的不常见用法

JSON.stringify////////////////////////////////zzzzzzzzzzzzzz

JSON.parse()和JSON.stringify() 的用法区别

JSON格式化，JSON.stringify()的用法