理解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.parse()与JSON.stringify是将JSON对象与字符串互相转换的方法,它们还有一些参数可以让我们在实际应用中更加方便,现在介绍一下它们的高级用法 JSON.parse() JS ...
- Newtonsoft.Json 的高级用法
Ø 简介 接着前一篇http://www.cnblogs.com/abeam/p/8295765.html,继续研究 Newtonsoft.Json 的一些高级用法.主要包括: 1. JSON ...
- JSON.stringify常见用法
转摘于其他博客 var data =[ { name: "金",sex:"1",age:26 }, { name: "才",sex:&quo ...
- JSON.parse()和JSON.stringify() 的用法区别
parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...
- JSON.parse()和JSON.stringify()的用法
JSON.parse()是用于从一个字符串中解析出json对象,如下所示 var str = '{"name":"flsummer","age&quo ...
- JSON.stringify实战用法
1.首先定义一个数组 var teamPlanMinList = new Array(); 2. 定义一个json对象 var json = { "plname":plname, ...
- JSON.stringify()的用法
**JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串,而我们一般只是用了第一个参数,没有在意过第二个以及第三个参数的妙用** **1.最常用的方式:** ...
- Jmeter 中JSON Path Extractor高级用法
好久没玩jemter了,由于项目原因又重新拾起.在使用JSON Path Extractor(jmeter 4.0已经默认支持了,4.0以下要自行安装插件)时,可以进行条件过滤,不用再自行写shell ...
- Newtonsoft.Json高级用法之枚举中文转义
最近看博客园中 焰尾迭的两篇关于"Newtonsoft.Json高级用法"的文章受到了很多人的评论,一度登入到头条推荐. 今天我就不再重复焰尾迭博文中的一些提过的Newtonsof ...
随机推荐
- 【Java深入研究】2、JDK 1.8 LinkedList源码解析
LinkedList是一个实现了List接口和Deque接口的双端链表. 有关索引的操作可能从链表头开始遍历到链表尾部,也可能从尾部遍历到链表头部,这取决于看索引更靠近哪一端. LinkedList不 ...
- 【Spring】9、Spring中的事件Event
Spring的ApplicationContext 提供了支持事件和代码中监听器的功能. 我们可以创建bean用来监听在ApplicationContext 中发布的事件.ApplicationEve ...
- 乐字节-Java8新特性之Date API
上一篇文章,小乐给大家带来了Java8新特性之Optional,接下来本文将会给大家介绍Java8新特性之Date API 前言: Java 8通过发布新的Date-Time API来进一步加强对日期 ...
- 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...
- GIS小知识
1.GeoJson 2.EPSG:3857 几何对象:{"id":0,"style":null,"parts":[1],"poin ...
- 【读书笔记】iOS-Game Kit
名字虽然叫Game Kit,但是Game Kit并不是仅仅开发游戏用的,它为开发者提供了两个非常实用的功能:使用Bonjour通过蓝牙进行点对点的网络传输功能,以及应用内语音聊天功能.有意思的是,语音 ...
- Ubuntu切换root身份,命令行以中文显示
很多VPS商给的默认用户名并不是root,用以下命令处理即可: 1.修改root密码 sudo passwd root 输入密码,回车,再确认一次即可 2.更改密码后切换root身份 su root ...
- Excel函数进阶
#笔记:为了方便自己以后查找,以便随时随地能查看.形成系统化学习! 查找引用函数 ------------------包含----------Vlookup函数(if数组).Hlookup函数.loo ...
- vi 复制或剪切多行超级强大方法
同一个文件:光标移到起始行,输入ma 光标移到结束行,输入mb 光标移到粘贴行,输入mc 然后 :'a, 'b co 'c 把 co 改成 m 就成剪切了多个文件:在文件一: 光标移到起始行,输入ma ...
- input输入的数据只允许整数和浮点型数据
//第一步:引入jquery //第二步:input输入框绑定该函数 例如:<input type="text" name="price" onInput ...