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() 函数最优, 如果存在且能返回正确的值, 则调用该函数; 否则按照默认的序列化方法;
如果提供了第二个参数, 则进行过滤操作, 该过滤的对象是第一步返回的值;
对第二部返回的值进行序列化;
如果提供了第三个参数, 则在序列化的时候加上格式化;
来源: http://www.qdfuns.com/article/26360/d302ad0e8efc2287b060e51f44246956.html