JavaScript入门学习笔记(JSON)

JSON是JavaScript Object Notation的简称,是一种轻量级的数据交换格式。

JSON使用JS的语法,但其格式只是一个文本,可以被任何编程语言读取病作为数据格式传递。

JSON以JS中对象的形式存储数据,允许数据结构、字符串、数字、boolean和对象的任意组合。

1 {"employees":[ 
//对象employees中有三个员工记录,以数组的形式存储
2 {"firstName":"John", "lastName":"Doe"}, 3 {"firstName":"Anna", "lastName":"Smith"}, 4 {"firstName":"Peter", "lastName":"Jones"} 5 ]}

JSON语法规则:

(1)数据为 键/值 对的形式

(2)数据由逗号分隔

(3)大括号保存对象

(4)方括号保存数组

数据(一个名称对应一个值):键/值 对包括字段名称,用双引号包起来,后面一个冒号,然后是值,ex:”firstName”:”John”

对象:保存在大括号中,对象内部也可以保存多个 键/值 对。

ex:{“firstName”:”John”, “lastName”:”Doe”}

数组:保存在中括号内,数组中也可以包含对象,

ex:”employees”:[
    {“firstName”:”John”, “lastName”:”Doe”},
    {“firstName”:”Anna”, “lastName”:”Smith”},
    {“firstName”:”Peter”, “lastName”:”Jones”}
]

JSON字符串转化为JS对象:

通常我们从服务器中读取JSON数据并在网页上显示。简单起见,在网页中设置JSON字符串。

(1)创建JavaScript字符串,字符串为JSON格式的数据。

1 var text = '{ "employees" : [' + 
2 //将各个部分用单引号包起来变成字符串,用+号进行字符串连接
3 '{ "firstName":"John" , "lastName":"Doe" },' + 
4 '{ "firstName":"Anna" , "lastName":"Smith" },' + 
5 '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

(2)使用JS的内置函数JSON.parse( )将字符串转化为JS对象:

var obj = JSON.parse(text);

(3)最后在页面中使用新的JS对象:

1 <p id="demo"></p>
2 
3 <script>
4 document.getElementById("demo").innerHTML = obj.employees[1].firstname + " " + obj.employees[1].lastname;
5 //访问对象obj中employees中第二个元素对象的firstname和lastname属性值
//employees在创建时是一数组的形式创建的,所以employees[1]表示取数组中的第二个值
6 </script>

 获取JSON属性值:

 1 var myStorage = {
 2 "car": {
 3 "inside": {
 4 "glove box": "maps",
 5 "passenger seat": "crumbs"
 6  },
 7 "outside": {
 8 "trunk": "jack"
 9 }
10 }
11 };
12 
13 
14 var gloveBoxContents = myStorage.car.inside["glove box"];
15 //对于单词的可以用点操作直接获取,遇到多个单词和空格组合的属性名使用方括号

 JSON集合操作:

《JavaScript入门学习笔记(JSON)》
《JavaScript入门学习笔记(JSON)》

 1 var collection = {
 2 2548: {
 3 album: "Slippery When Wet",
 4 artist: "Bon Jovi",
 5 tracks: [ 
 6 "Let It Rock", 
 7 "You Give Love a Bad Name" 
 8 ]
 9 },
10 2468: {
11 album: "1999",
12 artist: "Prince",
13 tracks: [ 
14 "1999", 
15 "Little Red Corvette" 
16 ]
17 },
18 1245: {
19 artist: "Robert Palmer",
20 tracks: [ ]
21 },
22 5439: {
23 album: "ABBA Gold"
24 }
25 };
26 
27 var collectionCopy = JSON.parse(JSON.stringify(collection));
28 
29 
30 function update(id, prop, value) {
31 
32 if (value !== '' && prop != 'tracks') {
33     collectionCopy[id][prop] = value;
34 } else if(value !== '' && prop == 'tracks'){
35     collectionCopy[id][prop].push(value);
36 } else {
37     delete collectionCopy[id][prop];
38 }
39 
40 return collection;
41 }
42 
43 
44 update(5439, "artist", "ABBA");

demo

 

    原文作者:六耳石猴
    原文地址: https://www.cnblogs.com/edward-life/p/10719693.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞