理解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>

理解JSON.stringify()高级用法相关推荐

JSON.parse和JSON.stringify的用法
平时我们在接收后端返回的json对象通常是一个字符串类型的object,所以一般我们要对这个object进行类型转化后,我们才能使用object里面的数据,而这其中涉及到两个必不可少的方法就是JSON ...
9 个JSON.stringify 的秘密大多数开发人员却不知道
前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群英文 | https:/ ...
理解JSON对象：JSON.parse、 JSON.stringify
何时是JSON,何时不是JSON? JSON就是一个有特殊规则的字符串,按照这个规则我们就可以把这个字符串解析成JS对象. JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaSc ...
Newtonsoft.Json高级用法
手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...
[转]Newtonsoft.Json高级用法
本文转自:http://www.cnblogs.com/yanweidie/p/4605212.html 手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多 ...
前端 JavaScript 中 JSON.stringify() 的基本用法
前言在开发工作中,我们可能会碰到这样的需求:需要将某个对象内容弹窗显示或者保存在文件中,这时候如果你直接弹窗的话,很可能就是下面这样的: 因为很多接口它对参数有要求,比如只能是字符串之类的. 这时候 ...
关于JSON.stringify（）的用法
写页面的时候一直没整明白为什么吗对象格式的要通过JSON.stringify()这个方法转一下有什么好处,最近看其它的博客get到一些实用的技巧第一种:在数组中提取数据 var data = [{n ...
$.each 循环json以及JSON.parse() JSON.stringify() jQuery.parseJSON()的用法:
$.each 循环 json 当循环的是 json 对象: var jsonStu = [{"name": "张三","score": &q ...
C# Newtonsoft.Json 高级用法
Newtonsoft.Json介绍: 做Web开发的,没有接触过JavaScript的肯定很少,做前端开发,没有接触过Ajax的估计更不多了.现在的系统大多数是分布式系统,分布式系统就会涉及到数据的传 ...

理解JSON.stringify()高级用法

理解JSON.stringify()高级用法相关推荐

最新文章

热门文章