JavaScript入门学习笔记（JSON）

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

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

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

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

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格式的数据。

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

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

var obj = JSON.parse(text);

（3）最后在页面中使用新的JS对象：

 <p id="demo"></p>

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

获取JSON属性值：

 var myStorage = {
 "car": {
 "inside": {
 "glove box": "maps",
 "passenger seat": "crumbs"
  },
 "outside": {
 "trunk": "jack"
 }
 }
 };

 var gloveBoxContents = myStorage.car.inside["glove box"];
 //对于单词的可以用点操作直接获取，遇到多个单词和空格组合的属性名使用方括号

JSON集合操作：

 var collection = {
 2548: {
 album: "Slippery When Wet",
 artist: "Bon Jovi",
 tracks: [
 "Let It Rock",
 "You Give Love a Bad Name"
 ]
 },
 2468: {
 album: "1999",
 artist: "Prince",
 tracks: [
 "1999",
 "Little Red Corvette"
 ]
 },
 1245: {
 artist: "Robert Palmer",
 tracks: [ ]
 },
 5439: {
 album: "ABBA Gold"
 }
 };

 var collectionCopy = JSON.parse(JSON.stringify(collection));

 function update(id, prop, value) {

 if (value !== '' && prop != 'tracks') {
     collectionCopy[id][prop] = value;
 } else if(value !== '' && prop == 'tracks'){
     collectionCopy[id][prop].push(value);
 } else {
     delete collectionCopy[id][prop];
 }

 return collection;
 }

 update(5439, "artist", "ABBA");

demo