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 相关文章推荐
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
javascript如何创建对象
Aug 29 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python之PyUnit单元测试实例
2014/10/11 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python解决八皇后问题示例
2018/04/22 Python
python 实现倒排索引的方法
2018/12/25 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
《夕阳真美》教学反思
2014/04/27 职场文书
公司门卫工作职责
2014/06/28 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书