理解JSON.stringify()高级用法

一:JSON.stringify()

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

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

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

space: 该参数的含义是指使用什么来做分隔符的。
1)如果该参数省略的话,那么显示出来的值是没有分隔符的。
2)如果是一个数字的话,那么它的含义是 缩进几个字符的意思,最大值为10.
3)如果是一个转义字符的话,比如 ‘\t‘, 表示回车,那么它每行一个回车。
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>

原文地址:https://www.cnblogs.com/tugenhua0707/p/9800453.html

时间: 2024-08-03 06:37:47

理解JSON.stringify()高级用法的相关文章

JSON.parse()与JSON.stringify()高级用法

JSON.parse()与JSON.stringify是将JSON对象与字符串互相转换的方法,它们还有一些参数可以让我们在实际应用中更加方便,现在介绍一下它们的高级用法 JSON.parse() JSON.parse(jsonString, (key, value) => {}) 可以接受两个参数,第一个就是我们已经熟悉的json字符串,第二个是一个回调函数,我们可以对返回的每一个value做处理,然后返回对应的value const testJSON = { name: 'test', val

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

JSON.stringify(json [, replacer] [, space]) 的用法 (1) json值:必须,可以是数组或Object; (2) replacer: 可选值,可以是数组,也可以是方法: 数组时,它是和json有关系的: 一般来说,系列化后的结果是通过键值对来进行表示的. 如果此时replacer的值在value中存在,那么就以replacer的值做key,json的值为value进行表示,如果不存在,就忽略. 方法时,就是说把系列化后json的每一个对象传进方法里面进

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

parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' 结果: JSON.parse(str) Object age: "23" name: "huangxiaojian" __proto__: Object 注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常. stringify(

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

JSON.parse()是用于从一个字符串中解析出json对象,如下所示 var str = '{"name":"flsummer","age":"23"}' JSON.parse(str) 结果:Object {name: "flsummer", age: "23"} 注意:单引号必须写在{}外,每个属性名都必须用双引号,否则会抛出异常. JSON.stringify()用于从一个对象

JSON.stringify实战用法

1.首先定义一个数组 var teamPlanMinList = new Array(); 2. 定义一个json对象 var json = { "plname":plname, "content_html":content_html, "teaId":teaId, "sort": sort }; 3.将json对象存放如 数组中  teamPlanMinList.push(json); 注意:第二步.第三步 可以放在循环中

Newtonsoft.Json高级用法之枚举中文转义

最近看博客园中 焰尾迭的两篇关于"Newtonsoft.Json高级用法"的文章受到了很多人的评论,一度登入到头条推荐. 今天我就不再重复焰尾迭博文中的一些提过的Newtonsoft.Json的高级用法.大家如果想知道直接去看. Newtonsoft.Json高级用法 再谈Newtonsoft.Json高级用法 我主要说焰尾迭没有提到的用法——枚举中文转义 枚举值序列化问题(摘自焰尾迭段落) public enum NotifyType { /// <summary> //

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

ECMAScript 5 对解析 JSON 的行为进行规范,定义了全局对象 JSON .支持这个对象的浏览器有 IE 8+.Firefox 3.5+.Safari 4+.Chrome 和Opera 10.5+. JSON 对象有两个方法: stringify() 和 parse() 用法如下: JSON.stringify()的用法/参数介绍 1.JSON.stringify(jsonObj),jsonObj为JSON数据,该方法是将JSON格式的数据,序列化成字符串类型 var bigWeb=

关于vue中JSON.parse(JSON.stringify(...))使用深拷贝问题

一般我们单独用JSON.parse()或JSON.stringify() 今天在学vue看到JSON.parse(JSON.stringify(...))的用法,这里研究一下: 首先分别说下他们的用法: JSON.parse()  是将字符串中的对象解析出来 例:  var str = "{'name':'huahua','age':'22'}";  JSON.parse(str); var obj = {name:"hua",age: 26};  JSON.str

JSON.stringify初识

1.JSON.stringify()简介: JSON.stringify()这个函数是用来序列化对象的,即是把对象类型转换成json类型. 它有三个参数,即JSON.stringify(value [, replacer] [, space]): value是必填,指要转换json类型的对象(类,数组等), replacer不是必填,用于转换结果的函数或数组, 如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值,使用返回值而不是原始值,如果此函