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操纵Cookie实现购物车程序
Feb 15 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
JS写滑稽笑脸运动效果
May 28 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之数据库操作详解及乱码解决!
2007/01/02 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
Puma印度官网:德国运动品牌
2019/10/06 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
人力资源部经理的岗位职责
2014/03/04 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
个人工作决心书
2015/09/22 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
深入理解python协程
2021/06/15 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle