JSON深度介绍-支持类型,循环数组,parse(),stringify(),eval()介绍

<一>JSON支持的7大基本数据类型

{
"a":"你好",
"b":2.111,
"c":10,
"d":false,
"e":null
"f":[2,"你好",false],
"g":{"g1":"值1","g2":"值2","g3":"值3"},
"h":[{"h1":["值1.1","值2.1","值3.1"],"h2":"值2","h3":"值3"},{"h4":"值4","h5":"值5"}]
}

1.a字符串 2.b浮点型 3.c整数型 4.d布尔值 5.e为空 6.f数组  7.g对象 8.数组对象

注意:

1.[ ]中括号代表的是一个数组 2.{ }大括号代表的是一个对象 3.双引号“ ”表示的是属性或值  

4.冒号：冒号前面是属性的名称，后面是属性的值，这个值可以是基本数据类型，也可以是引用数据类型。

5.undefined不是JSON中的数据类型,null为空,不要混淆了

6.在数组中可以混合使用各种类型的数据,但是并不推崇这么做,所以以上案例f的写法有待商榷

7.JSON不能存储Date对象。如果需要存储Date对象，需要先将其转换为字符串，之后再将字符串转换为Date对象。

例子:

var text='{"name":"Young","age":19,"car":null}';
var obj=JSON.parse(text);
obj.getElement("demo").innerHTML=onj.name+"创建日期"obj.initDate;

还可以使用parse的第二个参数来设置：

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;

<二>循环数组

注意:数组索引是从零开始的。

你可以使用 for-in 来访问数组：

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

你也可以使用 for 循环：

for (i = 0; i < myObj.sites.length; i++) 
{ x += myObj.sites[i] + "<br>"; }

嵌套 JSON 对象中的数组

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

我们可以使用 for-in 来循环访问每个数组：

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

修改数组值

myObj.sites[1] = "Github";

删除数组元素

delete myObj.sites[1]  //序号删除
delete myObj.sites["name"]; //[ ]来删除
delete myObj.sites.site1;  //关键字来删除

<三>数据读取格式:

stu.student[1].name="Jerry"
stu.student[0].age=11
stu.class.class1 = "room1"
stu["classroom"].class2="room2"   //也可用中括号键访问对象值

例子:我们怎么访问JSON对象属性?

var JSON = {
        "person" : [
            {"aaa" : {"age": 18} },
            {"bbb" : {"age": 20} }
        ]
    }

这里我们要访问 aaa的age,  就用 JSON.person[0].aaa.age或JSON.person[0]['aaa'].age来访问,  

<四>eval()

还有可以使用eval()将JSON文本转换为JS对象。 

eval()使用的是JS编译器，可以解析JSON文本，然后生成JS对象。 

var txt = '{ "sites" : [' +

'{ "name":"CSDN" , "url":"www.CSDN.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

但是eval可编译并执行JS代码，这个函数本身有安全问题,关于安全问题,可以详看: JSON中的安全问题,如何防止攻击?

<五>JSON.parse()

用处:

JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

用法:

text:必需， 一个有效的 JSON 字符串。

reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

JSON 解析实例

例如我们从服务器接收了以下数据：

{ “name”:“runoob”, “alexa”:10000, “site”:“www.runoob.com” }

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse(’{ “name”:“runoob”, “alexa”:10000, “site”:“www.runoob.com” }’);

解析前要确保你的数据是标准的 JSON 格式，否则会解析出错。

解析函数

JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数,但是不建议在 JSON 中使用函数

例子:

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()

JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

1.语法

JSON.stringify(value[, replacer[, space]])

value:必需， 要转换的 JavaScript 值（通常为对象或数组）。

replacer:可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

space:可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

注意:

1.JSON 不能存储 Date 对象。

JSON.stringify() 会将所有日期转换为字符串。

2.JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

例:

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

结果为:

{ "name":"Runoob","site":"www.runoob.com"};

我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

<七>JSON使用

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

源码展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>

    访问方法:sites[0].name,<br />例1第一行更改前:<span id="name1"></span><br /><br />
    修改方法:sites[0].name="淘宝",<br />例1第一行更改后:<span id="name2"></span><br /><br />
    访问方法sites2["name"],<br />例2访问纯对象name属性:<span id="name3"></span><br /><br />
    例3:使用 for-in 来循环对象,使用中括号[ ]来访问属性的值<br /><span id="name4"></span><br /><br />
     例4:<br /><span id="name5"></span><br /><br />
     例5:<br /><span id="name6"></span><br /><br />
    <script type="text/javascript">
//例1数组对象     使用点号（.）来访问对象的值,访问方法:sites[0].name,修改方法:sites[0].name="淘宝"
    var sites= [
    {"name":"百度","url":"www.baidu.com"},
    {"name":"谷歌","url":"www.google.com"},
    {"name":"腾讯","url":"www.qq.com"}
    ];
    document.getElementById("name1").innerHTML=sites[0].name
    sites[0].name="淘宝"
    sites[0].url="www.taobao.com"
    document .getElementById("name2").innerHTML=sites[0].name + sites[0].url

//例2纯对象     你可以使用中括号[ ]来访问对象的值：
    var sites2={"name":"百度","url":"www.baidu.com"}
    document .getElementById("name3").innerHTML=sites2["name"]  //访问值

//例3循环对象   你可以使用 for-in 来循环对象的属性：
    var sites3={"name":"百度","url":"www.baidu.com","address":"北京海淀"}
    for (x in sites3) {
    document.getElementById("name4").innerHTML +=x+":"    //例如 +=的意思在左边的变量上加上右边的值,i += 1等同于i = i + 1 。
    document.getElementById("name4").innerHTML +=sites3[x]+"<br / >" 
    };
//例4对象中包含另外一个 JSON 对象    你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。

var sites4={
    "g":"g1",
 "h": [
      { "h1":"值1",  "h2":[ "值1", "值2" ] },
      { "h3":"值1", "h4":[ "值1", "值2", "值3" ] },
      { "h5":"值1", "h6":[ "值1", "值2" ] }
   ]
}
document.getElementById("name5").innerHTML =sites4["g"]+ "<br / >" 
//例5 for-in循环

var sites4, i, j, x = "";
sites5 = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

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

document.getElementById("name6").innerHTML = x;
</script>


</body>
</html>

效果展示