-
语法
- JSON 值可以是：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）
- 对象（在大括号中）
- null - 书写格式
名称/值对（例如："name":"yyy"） -
对象操作
- 在访问对象时可以通过（./[]）获取到对象的值以及改变对象的值；
- 在遍历对象时使用for in进行循环，在循环中不能使用(.)获取属性值必须用（[ ] )访问对象值
- 使用delete可以删除对象属性
<div class="content" style="margin-bottom: 10px"></div>
<button id="btn_recover">点击显示信息</button>
<button id="btn_change">点击修改信息</button>
<button id="btn_delete">点击删除信息</button>
<script>
var myObj = {"name":"hyq","age":3,"sex":"girl"};
var content = document.getElementsByClassName("content")[0];
//显示对象的内容
document.getElementById("btn_recover").onclick = () => {
for (x in myObj){
content.innerHTML += x + ":" + myObj[x]+"<br\>";
}
};
//修改对象内容
document.getElementById("btn_change").onclick = () => {
myObj.name = "hyy";
content.innerHTML = "";
for (x in myObj){
content.innerHTML += x + ":" + myObj[x]+"<br\>";
}
};
//删除对象内容
document.getElementById("btn_delete").onclick = () => {
delete myObj.name;
content.innerHTML = "";
for (x in myObj){
content.innerHTML += x + ":" + myObj[x]+"<br\>";
}
}
</script>
-
数组操作
与对象操作类似，数组主要在中括号中书写
-
JSON.parse
将数据转换为javascript对象
- 语法：
JSON.parse(text[, reviver])
text:必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
- JSON中不存储Date对象，可以先将其转换为字符串之后再转换为Date对象
var txt = "{"name":"hyq","time":"2017-11-08-10:20"}";
var obj = JSON.parse(txt);
obj.time = new Date(obj.time);
- 使用第二个参数，使得每个成员调用该函数
var txt = "{"name":"hyq","time":"2017-11-08-10:20"}";
var obj = JSON.parse(txt,function(key,value){
if(key ==="time"){
return new Date（value）;
}
else{
return value;
}
});
- JSON不允许包含函数，可以先将函数转换为字符串在使用时再转换为函数
<div style="width: 500px;height: 500px;margin: 0 auto">
<div> 姓名：<span id="name">XXX</span></div>
<div> 年龄：<span id="age">XXX</span></div>
<div> 性别：<span id="sex">XXX</span></div>
<div style="margin-bottom: 10px"> 性别：<span id="score">XXX</span></div>
<button id="btn">点击改变信息</button>
</div>
<script>
document.getElementById("btn").onclick =() => {
var xmlHTTP;
if (window.XMLHttpRequest){
xmlHTTP = new XMLHttpRequest();
}
else{
xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHTTP.onreadystatechange = () => {
if (xmlHTTP.readyState === 4&&xmlHTTP.status === 200){
myObj = JSON.parse(xmlHTTP.responseText);
myObj.calculate=eval("("+myObj.calculate+")");
document.getElementById("name").innerHTML = myObj.name;
document.getElementById("age").innerHTML = myObj.age;
document.getElementById("sex").innerHTML = myObj.sex;
document.getElementById("score").innerHTML = myObj.calculate(myObj.Math,myObj.English,myObj.Chinese);
}
};
xmlHTTP.open("GET","/code/project/json/test/aaa.txt",true);
xmlHTTP.send();
}
</script>
-
JSON.stringfify()
将javascript对象、数组转换为字符串
- 语法：
JSON.stringify(value[, replacer[, space]])
- value:必需， 一个有效的 JSON 字符串。
- replacer:可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。- space:可选，文本添加缩进、空格和换行符
如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：\t。
- 解析数据
JSON不能存储日期，而stringify可以将全部日期转换为字符串
var myJson = JSON.stringify(myObj);
document.getElementById("example_1").innerHTML = myJson;
Date 对象的处理
- 解析函数
JSON不允许包含函数，stingify会删除函数（包括key和value）,必须在stringify前将函数转换为字符串
var myJson_2 = JSON.stringify(myObj);
document.getElementById("example_3").innerHTML = myJson_2;
