js中的json对象详细介绍


Posted in Javascript onOctober 29, 2014

1.JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单:对象是一个无序的“‘名称:值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值'对”之间使用“,”(逗号)分隔。

规则如下:

1)映射用冒号(“:”)表示。名称:值
2)并列的数据之间用逗号(“,”)分隔。名称1:值1,名称2:值2
3) 映射的集合(对象)用大括号(“{}”)表示。{名称1:值1,名称2:值2}
4) 并列数据的集合(数组)用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},

{名称1:值,名称2:值2}

]
5 )元素值可具有的类型:string, number, object, array, true, false, null

2.json中的五种写法:

1)传统方式存储数据,调用数据

<script type="text/javascript"> 

//JS传统方式下定义"类" 

function Person(id,name,age){ 

this.id = id; 

this.name = name; 

this.age = age; 

} 

//JS传统方式下创建"对象" 

var p = new Person(20141028,"一叶扁舟",22);
//调用类中的属性,显示该Person的信息 

window.alert(p.id); 

window.alert(p.name); 

window.alert(p.age); 

</script>

2)第一种样式:
<script type="text/javascript"> 

var person = { 

id:001, 

name:"一叶扁舟", 

age:23 

} 

window.alert("编号:"+person.id); 

window.alert("用户名:"+person.name); 

window.alert("年龄:"+person.age); 

</script>

3)第二种样式:
<script type="text/javascript"> 

var p = [ 

{id:001,name:"一叶扁舟",age:22}, 

{id:002,name:"无悔",age:23}, 

{id:003,name:"无悔_一叶扁舟",age:24} 

];
for(var i = 0; i < p.length; i++){ 

window.alert("编号:"+p[i].id); 

window.alert("用户名:"+p[i].name); 

window.alert("年龄:"+p[i].age);
} 

</script>

4)第三种样式:
<script type="text/javascript"> 

var p = { 

"province":[ 

{"city":"福州"}, 

{"city":"厦门"}, 

{"city":"莆田"} 

] 

}; 

window.alert("所在城市:" + p.province[0].city); 

</script>

5)第四种样式:
<script type="text/javascript"> 

var p = { 

"ids":[ 

{"id":001}, 

{"id":002}, 

{"id":003} 

], 

"names":[ 

{"name":"一叶扁舟"}, 

{"name":"无悔"}, 

{"name":"无悔_一叶扁舟"} 

] 

};
for(var i = 0; i < p.names.length; i++){ 

window.alert("名字:"+p.names[i].name);
} 

for(var i = 0; i < p.ids.length; i++){ 

window.alert("id:"+p.ids[i].id); 

}
</script>

6)第五种样式:
<script type="text/javascript"> 

var p = { 

"province":["福州","厦门","莆田"] 

}; 

window.alert("城市的个数:"+p.province.length); 

window.alert("分别是:\n"); 

for(var i=0;i<p.province.length;i++){ 

window.alert(p.province[i]); 

} 

</script>
Javascript 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 #Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 #Javascript
JavaScript中的迭代器和生成器详解
Oct 29 #Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 #Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 #Javascript
jQuery中parents()和parent()的区别分析
Oct 28 #Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 #Javascript
You might like
杏林同学录(三)
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
深入php list()函数的详解
2013/06/05 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php常用数学函数汇总
2014/11/21 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php文件上传类完整实例
2016/05/14 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
ES6函数实现排它两种写法解析
2020/05/13 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
用Python编程实现语音控制电脑
2014/04/01 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python编写Windows Service服务程序
2018/01/04 Python
python实现汉诺塔算法
2021/03/01 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
土木工程专业个人求职信
2013/12/05 职场文书
环境保护标语
2014/06/20 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript