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 相关文章推荐
js给dropdownlist添加选项的小例子
Mar 04 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
javascript实现雪花飘落效果
Aug 19 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
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
ExpressJS入门实例
2015/01/14 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
BootStrap 动态表单效果
2017/06/02 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
Python 的 Socket 编程
2015/03/24 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python解析xml简单示例
2019/06/21 Python
django fernet fields字段加密实践详解
2019/08/12 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
营销与策划应届生求职信
2013/11/04 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
领导干部考察材料
2014/02/08 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python