一：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>

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

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

    JSON.parse()与JSON.stringify是将JSON对象与字符串互相转换的方法,它们还有一些参数可以让我们在实际应用中更加方便,现在介绍一下它们的高级用法 JSON.parse() JS ...

  2. Newtonsoft.Json 的高级用法

    Ø  简介 接着前一篇http://www.cnblogs.com/abeam/p/8295765.html,继续研究 Newtonsoft.Json 的一些高级用法.主要包括: 1.   JSON ...

  3. JSON.stringify常见用法

    转摘于其他博客 var data =[ { name: "金",sex:"1",age:26 }, { name: "才",sex:&quo ...

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

    parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...

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

    JSON.parse()是用于从一个字符串中解析出json对象,如下所示 var str = '{"name":"flsummer","age&quo ...

  6. JSON.stringify实战用法

    1.首先定义一个数组 var teamPlanMinList = new Array(); 2. 定义一个json对象 var json = { "plname":plname, ...

  7. JSON.stringify()的用法

    **JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串,而我们一般只是用了第一个参数,没有在意过第二个以及第三个参数的妙用** **1.最常用的方式:** ...

  8. Jmeter 中JSON Path Extractor高级用法

    好久没玩jemter了,由于项目原因又重新拾起.在使用JSON Path Extractor(jmeter 4.0已经默认支持了,4.0以下要自行安装插件)时,可以进行条件过滤,不用再自行写shell ...

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

    最近看博客园中 焰尾迭的两篇关于"Newtonsoft.Json高级用法"的文章受到了很多人的评论,一度登入到头条推荐. 今天我就不再重复焰尾迭博文中的一些提过的Newtonsof ...

随机推荐

  1. Perl爬虫的简单实现

    由于工作中有个项目需要爬取第三方网站的内容,所以在Linux下使用Perl写了个简单的爬虫. 相关工具 1. HttpWatch/浏览器开发人员工具 一般情况下这个工具是用不到的,但是如果你发现要爬取 ...

  2. HTML--SVG基础

    一 SVG概述 SVG是Scalable Vector Graphics的缩写,即缩放式矢量图形; 优点: 1.使用编辑器即可编辑图形; 2.基于XML,SVG图形可以被很容易的搜索,脚本化和压缩; ...

  3. 初学HTML-7

    表单中的一些标签 label标签:让文字和输入框进行绑定,即,点击文字,输入框可以开始输入(默认文字和输入框没有关系,不会聚焦) 格式:<form action=""> ...

  4. spring boot （2）：spring boot 打包tomcat、tomcat 部署多个项目、服务器部署项目SSL 设置（阿里云）

    一.spring boot 内置tomcat配置https: 关于自签名证书可以看下上一篇 spring boot1 更详细的可以看转载 https://www.jianshu.com/p/8d4ab ...

  5. sql: Query to Display Foreign Key Relationships and Name of the Constraint for Each Table in Database

    --20170505 --塗聚文 Geovin Du CREATE DATABASE DuMailSystem GO USE DuMailSystem GO --1查詢表的及备注说明 SELECT S ...

  6. Ubuntu 切换键盘布局（colemak / workman / norman）

    首先找出所有可选的布局(layout)方案: $ man xkeyboard-config 可以看到 us 下有很多常见的布局方案(以下为节选): LAYOUTS ┌───────────────── ...

  7. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  8. AngularJS ui-router刷新子页面路由

    网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" ui-sref="app.toMenu&quo ...

  9. MSSQL一种取代游标的方案

    今天看到一篇文章写的自己整理记录下,据说比用游标快. DECLARE @字段1 数据类型; DECLARE @字段2 数据类型; DECLARE @TMP_WHILE_ID INT; ,),TMP_W ...

  10. 面向对象的封装与隐藏 this

    当我们创建一个对象的时候,我们可以通过‘对象.属性’的方式,对对象的属性进行赋值. 这里赋值操作要受到属性的数据类型和存储范围的制约,但是除此之外,没有其他制约条件. 但是实际问题中我们需要给这个属性 ...