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