JS中的JSON对象的定义和取值实现代码


Posted in Javascript onMay 09, 2018

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 相关文章推荐
addEventListener 的用法示例介绍
May 07 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
Vue渲染过程浅析
Mar 14 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 #Javascript
js合并两个数组生成合并后的key:value数组
May 09 #Javascript
详解Puppeteer 入门教程
May 09 #Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 #Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 #Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
JS验证输入的是否是数字及保留几位小数问题
May 09 #Javascript
You might like
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
js实现选项卡效果
2020/03/07 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python多进程编程常用方法解析
2020/03/26 Python
Python基于当前时间批量创建文件
2020/05/07 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
实习求职信
2013/12/01 职场文书
施工安全协议书
2013/12/11 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
学校后勤人员职责
2013/12/27 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
yy婚礼主持词
2014/03/14 职场文书
校外活动方案
2014/08/28 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技