理解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 ...
随机推荐
- Perl爬虫的简单实现
由于工作中有个项目需要爬取第三方网站的内容,所以在Linux下使用Perl写了个简单的爬虫. 相关工具 1. HttpWatch/浏览器开发人员工具 一般情况下这个工具是用不到的,但是如果你发现要爬取 ...
- Ps—导出：sql作业配合ps导出csv文件
$dateText=Get-Date #获取当前日期时间 $dateText = $dateText.ToShortDateString() #转为短日期格式(去掉时间部分) $checkDate=( ...
- 【代码笔记】Web-ionic 网格(Grid)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 长文本溢出显示省略号(…) text-overflow: ellipsis
text-overflow 属性规定当文本溢出包含元素时发生的事情. 默认值: clip 继承性: no 版本: CSS3 JavaScript 语法: object .style.textOverf ...
- php+smarty轻松开发微社区/微论坛
今天我们就来分析微社区的基本功能构成吧.首先,每个论坛最主要的是会员在对应的版块下发帖,或者在感兴趣的主题帖下跟帖盖楼.其次,会员能时时看到帖子或版块的基本信息.所以主要大块是: 前台:会员的注册登录 ...
- Units in Android
一般使用dp,不使用px.sp啥时候用呢?给TextView设置文字大小的时候用.
- linux上用newman+postman进行自动化测试
第一步:导出postman文件 Postman就是根据collection和enviroment这两个json文件来自动化运行的! 所以从Postman中导出collection和enviroment ...
- python学习第一周（1）
备注:一般规范代码,可以操作code-reformat code 1. #!/usr/bin/env python 脚本语言第一行 作用:文件中代码用指定可执行程序运行,在unix类的操作系统才有意义 ...
- Djanggo ORM操作
Django ORM那些相关操作 一般操作 看专业的官网文档:https://docs.djangoproject.com/en/1.11/ref/models/querysets/,做专业的程序员 ...
- WCF服务端开发和客户端引用小结
1.服务端开发 1.1 WCF服务创建方式 创建一个WCF服务,总是会创建一个服务接口和一个服务接口实现.通常根据服务宿主的不同,有两种创建方式. (1)创建WCF应用程序 通过创建WCF服务应用程序 ...