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 相关文章推荐
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 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
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP的PDO连接讲解
2019/01/24 PHP
为数据添加append,remove功能
2006/10/03 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python创建和使用字典实例详解
2013/11/01 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python得到windows自启动列表的方法
2018/10/14 Python
Django model select的多种用法详解
2019/07/16 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
社会稳定风险评估方案
2014/06/02 职场文书
岗位安全生产责任书
2014/07/28 职场文书
学生保证书
2015/01/16 职场文书
布达拉宫的导游词
2015/02/02 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
Python 统计序列中元素的出现频度
2022/04/26 Python