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的prototype属性
Feb 11 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
谈谈新手如何学习PHP
2006/12/23 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
2015国庆节宣传语
2015/07/14 职场文书
如何在C++中调用Python
2021/05/21 Python
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
python 常用的异步框架汇总整理
2021/06/18 Python
Golang 链表的学习和使用
2022/04/19 Golang