JSON 入门

JSON 入门

 

1.简介

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 是轻量级的文本数据交换格式，是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

 

2.语法规则

·数据在名称/值对中

·数据由逗号分隔

·大括号保存对象

·中括号保存数组

名称/值对包括字段名称（必须在双引号中），后面写一个冒号，然后是值：

"name" : "菜鸟教程"

JSON 值可以是：

数字(整数或浮点无引号) |字符串(双引号) |逻辑值(true/false) |数组(中括号) |对象(大括号) | null

范例：

// JSON数字
{ "age" : 30 }
// JSON字符串
{ "name" : "菜鸟教程" }
// JSON逻辑值
{ "flag" : true }
// JSON null
{ "runoob" : null }
// JSON对象
{ "name" : "菜鸟教程" , "url" : "www.runoob.com" }
// JSON数组
{
"sites": [
{ "name" : "菜鸟教程" , "url" : "www.runoob.com" },
{ "name" : "google" , "url" : "www.google.com" },
{ "name" : "微博" , "url" : "www.weibo.com" }
]
}

 

3.对象

var myObj = { "name":"runoob", "alexa":10000, "site":null };

①访问对象值：

使用点号（.） var x = myObj.name;

使用中括号（[]）var x = myObj["name"];

②修改对象值：

使用点号（.） myObj.name = "Tom";

使用中括号（[]）myObj["name"] = "Tom";

③删除对象属性：

使用点号（.） delete myObj.name;

使用中括号（[]）delete myObj["name"];

④循环对象：

//使用 for-in 来循环对象的属性

for (x in myObj) {

  document.getElementById("demo").innerHTML += x + " ";

  /*结果：name alexa site */

}

//使用 for-in 来循环对象的属性的值，只能用[]

for (x in myObj) {

document.getElementById("demo").innerHTML += myObj[x] + " ";

/*结果：runoob 10000 null */

}

⑤嵌套对象：

myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

 

4.数组

var myArray = [ "Google", "Runoob", "Taobao" ];

①访问数组：

var x = myArray [0];

②修改数组：

myArray [0] = "Github";

③删除数组：

delete myArray [0];

④循环数组：

//使用 for-in 来循环数组

for (i in myArray ) {

    document.getElementById("demo").innerHTML += i + " ";

/*结果：Google Runoob Taobao */

}

⑤嵌套数组：

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

 

5.JSON.parse()方法

JSON 通常用于与服务端交换数据，在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明：

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

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

范例：

var str = '{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }';

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

var obj = JSON.parse(str);

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

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);  //转换为对象
obj.initDate = new Date(obj.initDate); //obj.initDate = "2013-12-14"
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;
//结果：Sat Dec 14 2013 08:00:00 GMT+0800 (中国标准时间)

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.parse() 函数：

Firefox 3.5 | Internet Explorer 8 | Chrome | Opera 10 | Safari 4

 

6.eval()函数

语法格式：

eval(string)

eval函数接收一个字符串，并转换为代码执行。

如果执行结果是一个值，则返回此值，否则返回undefined。

需要特别注意的是字符串"{...}"并不能返回一个对象，需要用括号括起来才行。

需要特别注意的是字符串"function () {...}"并不能返回一个函数，需要用括号括起来才行。

简单示例如下：

var code1='"a" + 2';    //表达式
var code2="{a:2}";      //对象
var code3="function () {return 10000;}";      //函数
var x = eval(code1);     //x = a2
var x = eval(code2);     //x = 2，不是对象
var x = eval("(" + code2 + ")");    //x = {a:2}是对象
var x = eval(code3);     //失败，什么也不是
var x = eval("(" + code3 + ")");    //x = function () {return 10000;}

创建包含 JSON 语法的 JavaScript 字符串：

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

'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +

'{ "name":"google" , "url":"www.google.com" },' +

'{ "name":"微博" , "url":"www.weibo.com" } ]}';

使用eval() 可用于将 JSON 文本转换为 JavaScript 对象。

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

 

7.JSON.stringify()方法

SON 通常用于与服务端交换数据，在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法

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

参数说明：

value：

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

replacer:

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

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

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

space:

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

范例：

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：

var myJSON = JSON.stringify(obj);

JSON 不能存储 Date 对象。

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

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
//{"name":"Runoob","initDate":"2017-06-19T01:46:23.711Z","site":"www.runoob.com"}

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

需在执行 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.parse() 函数：

Firefox 3.5 | Internet Explorer 8 | Chrome | Opera 10 | Safari 4