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 相关文章推荐
ExtJs的Date格式字符代码
Dec 30 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
详解webpack打包vue时提取css
May 26 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
Vue仿支付宝支付功能
May 25 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
Angular封装表单控件及思想总结
Dec 11 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浏览历史记录的方法
2015/03/10 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
c/c++某大公司的两道笔试题
2014/02/02 面试题
演讲稿怎么写才完美
2014/01/02 职场文书
《社戏》教学反思
2014/04/15 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
给校长的建议书600字
2014/05/15 职场文书
2014年路政工作总结
2014/12/10 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python