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的获取标签名的代码
Jul 16 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
js继承的这6种方式!(上)
Apr 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
在PHP的图形函数中显示汉字
2006/10/09 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
javascript显示动态时间的方法汇总
2018/07/06 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
wxPython实现整点报时
2019/11/18 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
python能开发游戏吗
2020/06/11 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
车辆工程专业求职信
2014/06/14 职场文书
高中学生自我评价范文
2014/09/23 职场文书
外科护士长工作总结
2015/08/12 职场文书