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 相关文章推荐
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
Vuex的API文档说明详解
Feb 05 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
ThinkPHP之M方法实例详解
2014/06/20 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
异步加载script的代码
2011/01/12 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python学习小技巧之列表项的排序
2017/05/20 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python3实现随机数
2018/06/25 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Django缓存系统实现过程解析
2019/08/02 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
简单了解如何封装自己的Python包
2020/07/08 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
优秀的教师个人的中文求职信
2013/09/21 职场文书
销售人员个人求职信
2013/09/26 职场文书
超市营业员求职简历的自我评价
2013/10/17 职场文书
个人股份合作协议书
2014/10/24 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
高中班长竞选稿
2015/11/20 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js