js前端开发框架 |
前端app混合开发框架 |
web前端原生开发框架 |
JSON: 定义一种格式化数据的方式,并不从属于js,在web中用来传输数据,可以用在多种语言中,如php java;
语法结构:
1. 数据为 键-值 对类型的: "firstName":"John"
2. 数据由逗号分隔: "firstName":"John", "lastName":"Doe"
3.大括号保存对象 :{"firstName":"John", "lastName":"Doe"}
4. 方括号保存数组: [
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
- 可以嵌套使用;
解析与序列化: 可以将json对象解析为javascript对象,这样获取其中的值就很方便了。
两个方法:
- stringify():把js对象序列化为json字符串;用法:JSON.stringify(str); 实现序列化
- parse();把JSON字符串解析为原生的js对象; 用法:JSON.parse(jsonstr); 解析
例子:将一个js对象,转换为JSON格式输出,默认情况下不包含空格和缩进等字符。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<script>
var book = {
title: ‘Professional JavaScript’,
year: 2005,
edition: 3,
authors: [‘Nicks’, ‘Merry’],
}
var jsonText = JSON.stringify(book)
function lo() {
document.getElementById(‘demo’).innerHTML = jsonText
}
</script>
</head>
<body onload=”lo()”>
<p id=”demo”></p>
</body>
</html>
然后将该JSON 字符串再重新转化成js对象,采用访问属性的方式,输出title值:
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<script>
var book = {
title: ‘Professional JavaScript’,
year: 2005,
edition: 3,
authors: [‘Nicks’, ‘Merry’],
}
var jsonText = JSON.stringify(book)
var jsob = JSON.parse(jsonText)
function lo() {
document.getElementById(‘demo’).innerHTML = jsob.title
}
</script>
</head>
<body onload=”lo()”>
<p id=”demo”></p>
</body>
</html>
序列化选项:
stringify()函数,有可选的参数,可以改变序列化的格式
1. 过滤结果: 可以设置第二个数组来选择对象中的部分键值对来序列化 或者 做出一些改变后再序列化,可以传入数组或者函数
1.1 第二个参数中传入数组,这样序列化的时候只会序列化数组中出现的相关属性;
如:
**html 代码**
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<script>
var book = {
title: ‘Professional JavaScript’,
year: 2005,
edition: 3,
authors: [‘Nicks’, ‘Merry’],
}
var jsonText = JSON.stringify(book, [‘title’, ‘year’]) //只对title 和 year 这两个字段序列化
function lo() {
document.getElementById(‘demo’).innerHTML = jsonText
}
</script>
</head>
<body onload=”lo()”>
<p id=”demo”></p>
</body>
</html>
1.2 第二个参数传入函数,该函数接受两个参数,key和value。//函数内部可以执行一些过滤操作
如:
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<script>
var book = {
title: ‘Professional JavaScript’,
year: 2005,
edition: 3,
authors: [‘Nicks’, ‘Merry’],
}
var jsonText = JSON.stringify(book, function(key, value) {
//函数过滤
switch (key) {
case ‘authors’:
return value.join(‘&’) //使用&符号链接authors中的值
case ‘edition’:
return 4 //改变eidtion的值
default:
return value //其他值不变,默认返回原值
}
})
function lo() {
document.getElementById(‘demo’).innerHTML = jsonText
}
</script>
</head>
<body onload=”lo()”>
<p id=”demo”></p>
</body>
</html>
1.3 字符缩进:第三个参数,用于控制字符串的缩进和空白,如果是数值的话,表示缩进的空格数量,也可以用字符串
如:
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<script>
var book = {
title: ‘Professional JavaScript’,
year: 2005,
edition: 3,
authors: [‘Nicks’, ‘Merry’],
}
var jsonText = JSON.stringify(book, null, ‘–‘)
function lo() {
document.getElementById(‘demo’).innerHTML = jsonText
}
</script>
</head>
<body onload=”lo()”>
<p id=”demo”></p>
</body>
</html>
toJSON()方法:可以为任何对象添加toJSON()方法,从而自定义序列化方式
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<script>
var book = {
title: ‘Professional JavaScript’,
year: 2005,
edition: 3,
authors: [‘Nicks’, ‘Merry’],
toJSON: function() {
//自定义序列化方法
return “‘” + this.title + “‘ ,'” + this.year + “‘”
},
}
var jsonText = book.toJSON() //调用自定义的序列化方法
function lo() {
document.getElementById(‘demo’).innerHTML = jsonText
}
</script>
</head>
<body onload=”lo()”>
<p id=”demo”></p>
</body>
</html>
序列化实现的内部顺序:(序列化的顺序很重要!)
- toJSON()函数最优,如果存在且能返回正确的值,则调用该函数;否则按照默认的序列化方法;
- 如果提供了第二个参数,则进行过滤操作,该过滤的对象是第一步返回的值;
- 对第二部返回的值进行序列化;
- 如果提供了第三个参数,则在序列化的时候加上格式化;
评论前必须登录!
注册