1 <!DOCTYPE html>
2 <html>
3 <body>
4 <p>JSON</p>
5 <script>
6 // JSON 值可以是:数字,字符串,逻辑值,数组,对象,null
7 var personalInfoList = [
8 {"id":1, "name":"Harry", "age":22, "gender":null, "married":false, "advantage":["C", "C#", "C++"]},
9 {"id":2, "name":"Frank", "age":26, "gender":null, "married":true, "advantage":["Java", "JavaScript", "Python"]}
10 ];
11 // 可以如下访问JSON
12 console.log(personalInfoList[1].name);
13 console.log(personalInfoList[1]["age"]);
14 // 循环访问元素
15 for(i in personalInfoList) {
16 for(j in personalInfoList[i].advantage) {
17 console.log(personalInfoList[i].advantage[j]);
18 }
19 }
20
21 // JSON通常用于与服务端交换数据/在接收服务器数据时一般是字符串
22 // 可以使用JSON.parse()方法将数据转换为JavaScript对象
23 var personalInfoListStr = '[ {"id":1, "name":"Harry", "age":22, "gender":null, "married":false, "advantage":["C", "C#", "C++"]},\
24 {"id":2, "name":"Frank", "age":26, "gender":null, "married":true, "advantage":["Java", "JavaScript", "Python"]} ]';
25 // 转换成一个有效的JSON字符串
26 var personalInfoList1 = JSON.parse(personalInfoListStr);
27 console.log(personalInfoList1[1].name);
28 console.log(personalInfoList1[1].age);
29 // 可以加一个转换结果的函数, 将为对象的每个成员调用此函数
30 var personalInfoList2 = JSON.parse(personalInfoListStr, function(key, value) {
31 if(key == "age") {
32 return value + 1;
33 } else {
34 return value;
35 }
36 });
37 console.log(personalInfoList2[0].age);
38 console.log(personalInfoList2[1].age);
39
40 // JSON 通常用于与服务端交换数据/在向服务器发送数据时一般是字符串
41 // 可以使用 JSON.stringify()方法将JavaScript对象转换为字符串
42 // [注意!]不得包含Data对象和函数对象
43 var personalInfoList3 = JSON.stringify(personalInfoList);
44 console.log(personalInfoList3);
45 // 带有转换结果和文本缩进
46 var personalInfoList4 = JSON.stringify(personalInfoList, function(key, value) {
47 if(key == "age") {
48 return value - 1;
49 } else {
50 return value;
51 }
52 }, 2);
53 console.log(personalInfoList4);
54
55 // eval()函数也可以解析 JSON 文本,然后生成JavaScript对象
56 var personalInfoList5 = eval(personalInfoListStr);
57 console.log(personalInfoList5[1].name);
58 console.log(personalInfoList5[1].age);
59 // eval()函数同时可以编译执行任何JavaScript代码, 会有潜在安全问题,所以,还是最好使用JSON.parse
60 var demo = 'console.log("lalala~");';
61 eval(demo);
62 </script>
63 </body>
64 </html>