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 parseInt 大改造
Sep 27 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python 读写文件的操作代码
2018/09/20 Python
python面向对象法实现图书管理系统
2019/04/19 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
新年团拜会主持词
2014/04/02 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android