源码下载地址:https://download.csdn.net/download/cplvfx/10442257
声明变量:
myObj:是json变量
i:用于遍历json
x:用于存储
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
建立函数,减少代码冗余:
//建立函数,减少代码冗余
function forin(){
//使用 for-in 来循环对象的属性读取数据
for (i in myObj) {
x += i+ ":"+myObj[i]+"<br>";
}
x +="<hr>"
}
读取原始数据:
x +="<h1>原始数据</h1>"
forin();
打印:
name:网站
num:3
sites:Google,Runoob,Taobao
增加:
myObj.user='我是新增的用户-小明';
x +="<h1>增加后的数据</h1>"
forin();
打印:
name:网站
num:3
sites:Google,Runoob,Taobao
user:我是新增的用户-小明
修改:
myObj.name= "我的网站";
x +="<h1>修改后的数据</h1>"
forin();
打印:
name:我的网站
num:3
sites:Google,Runoob,Taobao
user:我是新增的用户-小明
指定读取:
x +="<h1>指定读取myObj里的数据</h1>"
x+='指定读取name:'+myObj.name+ "<br>";
x+='指定读取num:'+myObj.num+ "<br>";
x+='指定读取sites:'+myObj.sites+ "<br><hr>";
打印:
指定读取name:我的网站
指定读取num:3
指定读取sites:Google,Runoob,Taobao
使用 for-in 来访问数组:
x +="<h1>读取myObj里的sites数组的数据</h1>"
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
x +="<hr>"
打印:
Google
Runoob
Taobao
删除:
delete myObj.sites;
x +="<h1>删除后的数据</h1>"
forin();
打印:
name:我的网站
num:3
user:我是新增的用户-小明
页面输出:
document.getElementById("demo").innerHTML = x;
完整源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对json对象增加,修改,删除,查询操作</title>
</head>
<body>
<p>对json对象增加,修改,删除,查询操作</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
/*
*
*
--------分割线---------
*
*
*/
//建立函数,减少代码冗余
function forin(){
//使用 for-in 来循环对象的属性读取数据
for (i in myObj) {
x += i+ ":"+myObj[i]+"<br>";
}
x +="<hr>"
}
/*
*
*
--------分割线---------
*
*
*/
//原始数据
x +="<h1>原始数据</h1>"
forin();
/*
*
*
--------分割线---------
*
*
*/
//增加
myObj.user='我是新增的用户-小明';
x +="<h1>增加后的数据</h1>"
forin();
/*
*
*
--------分割线---------
*
*
*/
//修改
myObj.name= "我的网站";
x +="<h1>修改后的数据</h1>"
forin();
/*
*
*
--------分割线---------
*
*
*/
//读取
x +="<h1>指定读取myObj里的数据</h1>"
x+='指定读取name:'+myObj.name+ "<br>";
x+='指定读取num:'+myObj.num+ "<br>";
x+='指定读取sites:'+myObj.sites+ "<br><hr>";
/*
*
*
--------分割线---------
*
*
*/
//使用 for-in 来访问数组:
x +="<h1>读取myObj里的sites数组的数据</h1>"
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
x +="<hr>"
/*
*
*
--------分割线---------
*
*
*/
//删除
delete myObj.sites;
x +="<h1>删除后的数据</h1>"
forin();
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>