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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
js 获取时间间隔实现代码
May 12 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
JS实现页面鼠标点击出现图片特效
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多线程抓取网页实现代码
2010/07/22 PHP
浅析php创建者模式
2014/11/25 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
Python常用内置函数总结
2015/02/08 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Python 自由定制表格的实现示例
2020/03/20 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
南京青奥会口号
2014/06/12 职场文书
片区教研活动总结
2014/07/02 职场文书
2014最新离职证明范本
2014/09/12 职场文书
宾馆安全管理制度
2015/08/06 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
Golang 结构体数据集合
2022/04/22 Golang