【JSON】对JSON的学习记录

目录

一、JSON和JavaScript 对象的关系。

JavaScript 对象：

JSON：

语法：

在访问上：

    JSON对象

    JSON数组：

二、与服务端交换数据相关的json.parse()与json.stringify()【序列化与反序列化】

三、JSON的使用！eval() 函数！

---

——————————————————————————————————

一、JSON和JavaScript 对象的关系。

JavaScript 对象：

JavaScript 对象是变量的容器（又称是键值对的容器），拥有属性和方法。例：person是一个JavaScript对象。

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

对象属性以键值对方式储存，并且对象方法也是作为对象的属性储存，然后通过添加“()"调用。

创建时可以先创建对象，再添加属性和属性值(方法)。

var person=new Object();
person.name='a';
person.method=function(){
    return this.name;
}

当我们要访问对象属性和对象方法时：

对象属性有两种方法来访问：【person.id】或者【person["id"]】。

对象的方法在访问时不带“()”会将方法体输出（输出：【function() { return this.firstName + " " + this.lastName; }……】，此时方法作为一个属性）；而带了“()”则会立即执行这个方法（此时作为一个函数）。

JSON：

JSON: JavaScript Object Notation(JavaScript 对象表示法)。

它是一种轻量级的文本数据交换格式，在语法上它的文本格式与创建 JavaScript 对象的代码相同。比XML更短、效率更高。

由于这种相似性，无需解析器，JavaScript 程序能够凭借内建的 eval() 函数，直接用JSON 数据来生成原生的 JavaScript 对象。

语法：

JSON对象与JavaScript 对象相似，它的语法也采用键值对的形式。

{//JSON可以是数字、字符串、布尔值、数组、对象、null
    //sites是一个JSON数组    
    "sites": 
    [
        { "name":"菜鸟教程" , "url":"www.runoob.com"，"flag":true }, 
        { "name":"google" , "url":null ,"flag":false}, 
        //每行记录是一个JSON对象，每个对象包含多个键值对，同时也可以嵌套对象:
        { "name":"菜鸟教程" , "flag":true，"url":{
                                                "url1":"www.runoob1.com"
                                                "url2":"www.runoob2.com"
                                           }， 
        }, 
    ]
}

这里要区分一下JSON对象和JSON字符串：

json 对象：
    var str2 = { "name": "asan", "sex": "man" };
json字符串：
    var str1 = '{ "name": "deyuyi", "sex": "man" }';

与JavaScript 对象不同的是，JSON的键名也是要用双引号来括起。

在访问上：

JSON对象

JSON对象可以通过【点号：.】以及【中括号：[]】来访问JSON对象的值。

同样，也可以通过这样的方式来修改JSON对象的值：

myObj.sites["site1"] = "www.google.com";

同时可以使用for-in循环对象的属性。注意循环遍历仅能用【 myObj[x] 】，而不能用【myObj.x】。

<div id="demo"></div>
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

再次同样的，我们也可以这样的方式来删除JSON对象的属性：

delete myObj.sites.site1;
delete myObj.sites["site1"]

但这里的删除，要和JSON数组的删除区分开。

JSON数组：

JSON数组除了最普遍的数组元素是对象外，也可以设置对象的属性值为数组，甚至可以【对象 嵌套 数组 嵌套 对象 嵌套 数组】

myobj={
    "name":"一层对象"，
    "num":3，
    "sites":[
        {"name":"二层对象1"，"info":["二层数组元素1"，"二层数组元素2"，"二层数组元素3"]},
        {"name":"二层对象2"，"info":["二层数组元素1"，"二层数组元素2"]},
    ]
}

访问和遍历JSON数组：一个例子解释：

for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }

添加和删除JSON数组元素：

和JSON对象的删除不同，delete关键字所做的仅仅是把对象的值删除，但是会保留原有的空间。

var test = [{ "a": "1", "b": "2" }, { "a": "3", "b": "4" }, { "a": "5", "b": "6" }];
test.length   //输出为 3
delete test[1];
test.length   //输出仍为 3

此时，仅仅将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组。

如果想要把这个空间删除，使之长度变成2，就要用到一个简洁的splice() 方法，同时，也可以向数组内添加新的元素，

test.splice(1, 1);
test.length   //输出为 2

语法： array.splice(index,howmany,item1,.....,itemX)   index：必须；规定添加/删除的位置，这个参数是数组元素的下标。 howmany：必须；规定删除从位置开始多少个元素，可以为0(执行但不删除)，如果不定义此参数，则会删除从index位置到结尾的所有元素。 item1, ..., itemX：可选；从index新增加的数组元素   如下例： var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,1,"Lemon","Kiwi"); 输出结果： Banana,Orange,Lemon,Kiwi,Mango   这个结果是从第二个位置先删除一个元素然后再新增两个元素。如果不删除一个则设置howmany为0.

 

二、与服务端交换数据相关的json.parse()与json.stringify()【序列化与反序列化】

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

在向服务器发送数据时一般是字符串。

因此我们在接收数据时要把接收的数据转化为 JavaScript 对象，而在发送数据时就要反过来把JavaScript对象转化为字符串。

总言之，服务端的处理一般是字符串形式（注意！一般论！非绝对！！！），而客户端则一般是JavaScript对象形式。

为此有两个方法，用于这两种情况：

【注意！这两种方法涉及的转换是JavaScript对象，而非JSON对象，关于JSON对象的使用参见第三部分！】

json.parse()【接收时：数据-》JavaScript对象】与json.stringify()【发送时：JavaScript对象-》数据】

json.parse()【数据-》JavaScript对象】 语法：json.parse(text [,reviver]) 参数说明：text指有效的JSON字符串，必选；reviver则是一个转换结果的函数，并将对对象所有成员使用该函数，可选。   为什么要使用它？因为服务端此时返回的是JSON字符串，而非JSON对象！前者是一串数组形式的字符，而后者才是上文所提及的可读 键值对。   使用实例： 从服务端接收到的数据：data： { "name":"runoob", "alexa":10000, "site":"www.runoob.com" } 转化一下： var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'); 此时就可以用JavaScript对象的方法来操作这些数据了： document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;   当然！如果从服务端接收的是JSON对象【或数组】（上文提及是JSON字符串），我们也可以用它来转化为JavaScript对象。   另外，JSON不能储存Date时间对象，也不允许储存函数。 Date时间对象可以通过语法中的第二个参数reviver来转换一下。 例： var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}'; var obj = JSON.parse(text, function (key, value) {                         if (key == "initDate") { return new Date(value); }                         else { return value; }                      }); document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate; 这样转换中，date对象就以字符串的形式保存在value了。           注意：用reviver进行遍历时，最后遍历到顶层对象为”“，这个对象需要返回value。 例： var json = '{"name":"Harvy", "age":36, "gender":"male"}'; var person = JSON.parse(json, function (key, value) { if(key != "") return "<font color=\"blue\">"+value+"</font>"; else return value; });   至于函数也可以用类似的方式来转换为字符串，具体需要用到下一部分的eval方法： 例： var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

json.stringify()【JavaScript对象-》数据】 语法：JSON.stringify(value [,replacer[,space]]) 参数说明：value指有效的JSON对象必选；replacer是用于转换结果的函数或者数组，可选；space是为文本添加空格和换行符，为返回值文本每个级别添加空格。 使用实例： 即将向服务端发送以下数据：var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"}; 转换一下：var myJSON = JSON.stringify(obj); 现在的myJSON就是字符串了，而非JSON或者JS对象。 数组也是同样的处理·。   同样，json.stringify()不能储存Date对象和函数。 它会自动把Date转换为字符串（你可以在服务端把它再转为Date）。 对于函数，json.stringify()会直接删除有关函数的键值对。因此需要在json.stringify()执行前将函数转换为字符串。 例： var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"}; obj.alexa = obj.alexa.toString(); var myJSON = JSON.stringify(obj);

 

三、JSON的使用！eval() 函数！

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

而JavaScript 函数 eval() 则可以将 JSON 文本【即JSON字符串！而非JSON对象】转换为 JavaScript 对象。

在解析文本(JSON字符串)时,要把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txt + ")");

实例：

var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';
 
var obj = eval ("(" + txt + ")");
 
document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url

实测，如果是把JSON对象进行转换，而非将JSON字符串转换为JS对象时：

不需要【eval ("(" + txt + ")");】中的两个括号；值得一提，此时的JSON只有一个对象，里面的数组是值的数组。

 <script type="text/javascript">
        var txt = { "sites" : [ 
            { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
            { "name":"google" , "url":"www.google.com" },
            { "name":"微博" , "url":"www.weibo.com" } 
        ]
        };

        var obj = eval( txt );

        document.getElementById("name").innerHTML = obj.sites[0].name
        document.getElementById("url").innerHTML = obj.sites[0].url
        alert(txt);
    </script>

另外！

如果是用AJAX的话，没有指定返回的dataType，默认会返回一串JSON字符串，需要用到JavaScript 函数 eval() 来转换，注意加括号。

反之，如果指定了返回的dataType为JSON，直接用就可以啦！