小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端设计师,从事过网站建设,响应式网站开发,网络维护,SEO,SEM,网络推广等前端相关工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云

最新发布

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

分类: json+xml评论(1)3个赞

<一>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;


image.png


<二>循环数组

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


你可以使用 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>


效果展示

image.png