javaScript中JSON.stringify()函数

最新推荐文章于 2024-04-18 09:02:24 发布

程宇寒

最新推荐文章于 2024-04-18 09:02:24 发布

阅读量1k

点赞数 1

文章标签： javaScript js json 前端开发 stringify函数

本文链接：https://blog.csdn.net/czh500/article/details/115275945

版权

JSON.stringify()

JSON.stringify()的5个秘密特性

运行结果如下：

源码如下：

<!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>

最近比较忙，文章没有做排版，所以阅读体验不是很好，等我忙完这阵子吧！