理解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 ...
随机推荐
- Salesforce的站点和社区
社区 Salesforce提供了"社区"功能.建立一个"社区"相当于建立一个前端的网站,让用户.客户.其他合作伙伴等浏览并使用其中的内容. 启用Salesfor ...
- 使用CLion在MacOS、Linux上编译C++代码
推荐: http://www.cnblogs.com/conorpai/p/6425048.html
- CSS3伪类和伪元素
作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...
- (后端)Java中关于金额大小写的工具类
/** * 金额小数转换成中文大写金额 * * @author Neil Han * */ private static final String UNIT[] = { "万", ...
- LeetCode题解Maximum Binary Tree
1.题目描述 2.分析 找出最大元素,然后分割数组调用. 3.代码 TreeNode* constructMaximumBinaryTree(vector<int>& nums) ...
- docker常用命令整理-在容器中使用service命令
在docker中使用centos镜像启动了容器并安装了相关软件,之后想用service命令启动相关服务却收到如下错误: Failed to get D-Bus connection: Operatio ...
- php解决前后端验证字符串长度不一致
前端代码 function getStrleng(str){ var myLen =0; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i)& ...
- Python基础知识：集合
1.集合(set)是一个存放在中括号内的无序,不重复的序列.例如:set = {'1','12','25'} 2.创建集合的两种方法: set = {1,2,3} 中括号直接创建 set = {[1, ...
- 【PAT】B1043 输出PATest（20 分）
/* */ #include<stdio.h> #include<algorithm> #include<string.h> #include<ctype.h ...
- STL vector简单用法
初涉c++,此为<算法笔记>中的内容,有待个人理解完善. vector vector翻译为向量,叫做"变长数组"更容易理解. 头文件:#include<vecto ...