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 相关文章推荐
js定时器的使用(实例讲解)
Jan 06 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JS中准确判断变量类型的方法
Jun 01 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python动态视频下载器的实现方法
2019/09/16 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
新闻学毕业生自荐信
2013/11/15 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
自书遗嘱范文
2015/08/07 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记