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 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
vue实现商城购物车功能
Nov 27 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
JS异步宏队列微队列原理详解
Sep 09 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设计模式之模板方法模式实例浅析
2018/12/20 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python 含参构造函数实例详解
2017/05/25 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python小项目之五子棋游戏
2019/12/26 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
高中生校园生活自我评价
2013/09/19 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
迎新生标语大全
2014/10/06 职场文书
销售2014年度工作总结
2014/12/08 职场文书
2015年售票员工作总结
2015/04/29 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
mysql如何查询连续记录
2022/05/11 MySQL