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 相关文章推荐
单独使用CKFinder选择图片的方法
Aug 21 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
javascript this详细介绍
Sep 19 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js Calender控件使用详解
2015/01/05 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
微信小程序实现展示评分结果功能
2019/02/15 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
mysql 之通过配置文件链接数据库
2017/08/12 Python
查看Django和flask版本的方法
2018/05/14 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
一年级家长会邀请函
2014/01/25 职场文书
电焊工岗位职责
2014/03/06 职场文书
物流专业求职信
2014/06/30 职场文书
代领毕业证委托书
2014/08/02 职场文书
婚前协议书标准版
2014/10/19 职场文书
小兵张嘎观后感
2015/06/03 职场文书
《鲸》教学反思
2016/02/23 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技