zoukankan      html  css  js  c++  java
  • 理解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>
  • 相关阅读:
    推荐一款酷炫闪烁的告警按钮
    设计模式之单例模式(懒汉式单例、饿汉式单例、登记式单例)
    JDK1.8新特性-Lambda表达式
    博客园自定义样式(去广告、公告栏加头像、按钮样式)
    java月考题JSD1908第二次月考(含答案和解析)
    Java面试题_第四阶段
    Java面试题_第三阶段(Spring、MVC、IOC、AOP、DI、MyBatis、SSM、struts2)
    Java面试题_第二阶段(Servlet、HTTP、Session、JSP、 Ajax、Filter、JDBC、Mysql、Spring)
    Java面试题_第一阶段(static、final、面向对象、多线程、集合、String、同步、接口、GC、JVM)
    Oracle排名函数(Rank)实例详解
  • 原文地址:https://www.cnblogs.com/tugenhua0707/p/9800453.html
Copyright © 2011-2022 走看看