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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
Python压缩和解压缩zip文件
2015/02/14 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Django验证码的生成与使用示例
2017/05/20 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python字典一键多值实例代码分享
2019/06/14 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
土木工程个人自荐信范文
2013/11/30 职场文书
爱情检讨书大全
2014/01/21 职场文书
建议书标准格式
2014/03/12 职场文书
汽车维修求职信
2014/06/15 职场文书
医院标语大全
2014/06/23 职场文书
护理见习报告范文
2014/11/03 职场文书
工作保证书怎么写
2015/02/28 职场文书
学历证明样本
2015/06/16 职场文书
离职信范本
2015/06/23 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle