运行结果如下:
源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaScript中JSON.stringify()函数</title>
<style type="text/css">
input[type=button] {
background-color: #8E388E;
border: 0px solid #8E388E;
color: #fff;
width: 160px;
height: 40px;
border-radius: 6px; /*把边框做成圆角*/
}
</style>
<script type="text/javascript">
//JSON.stringify()可以把JSONObject转化为JSON规则的字符串
//参考网页https://www.sojson.com/json/json_stringify.html
var person = {
"name" : "令狐冲",
"gender" : "男",
"age" : 16,
"hometown" : {
"province" : "江西省",
"city" : "赣州市",
"county" : "于都县"
}
};
console.log("person的数据类型是" + typeof person);
//stringify()函数带1个参数
var str1 = JSON.stringify(person);
console.log("*A*", str1);
console.log("*A2*", typeof str1);
/*
stringify()函数带2个参数,第2个参数是一个数组(第2个参数的意思是把person对象转换成json字
符串后,只返回该json字符串中key等于age和hometown的数据)
*/
//第2个参数的意思是只想输出指定的属性(即只想输出age和hometown的数据)
var str2 = JSON.stringify(person, ["age", "hometown"]);
//如下:只返回了{"age":16,"hometown":{}}
console.log("*B*", str2); //*B* {"age":16,"hometown":{}}
console.log("*B2*", typeof str2);
var dog = {
"name" : "旺财",
"age" : 4,
"gender" : true,
"hobby" : undefined,
"weight" : 1.3
};
console.log("*C*", dog, typeof dog);
//stringify()函数带2个参数,第2个参数是一个函数
var str3 = JSON.stringify(dog, function(key, value) {
console.log("**" + "key=" + key, "value=" + value + "**");
if (key == "weight") {
//如果返回undefined,该属性值不会在JSON字符串中输出
return undefined;//剔除weight
}
return value;
});
console.log("*C2*", str3, typeof str3);
console.log("*C3*", dog, typeof dog);
/*
stringify()函数带3个参数,第3个参数的作用是对返回后的json字符串进行美化,
说白了就是对返回后的json字符串进行格式化,看下面的案例就明白了
*/
var cat = {
"name" : "HelloKitty",
"age" : 6
};
var str4 = JSON.stringify(cat, null);
//这里的参数10,表示每个元素前面都间隔10个空格
var str5 = JSON.stringify(cat, null, 10);
console.log("*D2*", str4);
console.log("*D3*", str5);
var s = JSON.stringify(cat, null, 0);
console.log("*D4*", s);
//这里的参数*****,表示每个元素前面都显示*****
var str6 = JSON.stringify(cat, null, "*****");
console.log("*D5*", str6);
//这里的参数*****,表示每个元素前面都显示*****
var str7 = JSON.stringify(cat, null, "我是囧囧");
console.log("*D6*", str7);
//也可以用tab来定制空格美化输出,采用\t即可
var str8 = JSON.stringify(cat, null, "\t\t\t\t\t");
console.log("*D7*", str8);
/*
我们有一个名为toJSON的类函数,它的属性是可以作为任何对象的一部分。
JSON.stringify返回这个函数的结果并对其进行字符串化,而不是将全部数据转换为字符串
*/
var user = {
"firstName" : "张",
"lastName" : "无忌",
"age" : 19,
"toJSON" : function fullName(){
return "我是" + this.firstName + this.lastName;
}
};
var str9 = JSON.stringify(user);
//没有输出全部数据,而是只有toJSON函数的结果
console.log("###1", str9); //###1 "我是张无忌"
console.log(JSON.stringify("我是段誉")); //"我是段誉"
console.log(JSON.stringify('我是乔峰')); //"我是乔峰"
//
var pig = {
"name" : "佩奇爸爸",
"age" : 23
};
var pig2 = {
"name" : "佩奇",
"age" : 3,
"father" : pig
};
console.log("###2", pig, pig2);
var str10 = JSON.stringify(pig2);
console.log("###3", str10);
//
var superStar = {
"id" : "666",
"age" : 19,
"fn" : function hello(){
return "我是周杰伦";
}
};
//function函数并不会转换为字符串
var str11 = JSON.stringify(superStar);
//function函数并不会转换为字符串,如下:只转换成了{"id":"666","age":19}
console.log("###4", str11); //###4 {"id":"666","age":19}
</script>
</head>
<body style="background-color: #CCE8CF;">
<h1>javaScript中JSON.stringify()函数</h1>
<div id="div1" style="background-color: Wheat; height: 100%;"></div>
</body>
</html>
最近比较忙,文章没有做排版,所以阅读体验不是很好,等我忙完这阵子吧!