javascript学习之json入门


Posted in Javascript onDecember 22, 2016

1. 什么是JSON

JSON---Javascript Object Notation,前两个单词大家应该都认识,最后一个notation,是“记号、标记法”的意思,连在一起,便成了JSON。

它是一种轻量级的数据交换格式,是基于Javascript的一个子集,可以叫做Javascript对象表示法,是存储和交换文本信息的语法,但它并不是Javascript独有的数据格式,其它很多语言都可以对JSON进行解析和序列化。

2. JSON的由来

在21世纪初,Douglas Crockford(Web开发领域最知名的技术权威之一,ECMA JavaScript2.0标准化委员会委员,被JavaScript之父Brendan Eich称为JavaScript的大宗师(Yoda),曾任Yahoo!资深JavaScript架构师,现任PayPal高级JavaScript架构师)试图寻找一种更加简便的数据交换格式,能够在服务器之间交换数据,当时通用的数据交换语言是XML,但是Douglas Crockford认为XML的生成与解析都过于麻烦,所以他提出了一种更加简化的格式,就是我们现在使用的JSON。

JSON的规格十分简单,只用一个页面几百个字就能说清楚,而且Douglas Crackford称这个规格永远不用升级,因为该规定的都已经规定好了。

3. 为什么要用JSON

JSON类似于XML,比XML更小、更快、更容易解析。但同时XML也有它的不可替代性,应根据使用场景进行更合适的选择;

JSON语法简单,很容易理解,并且对象信息自描述,数据传输量小不占用带宽;

JSON虽然远不及emoji这一世界通用语言,但其实它的支持度也已经非常可观,支持的语言包括C,C#,Java,JavaScript,PHP,Python,Ruby等等;

对于Ajax应用程序来说,JSON比XML更快捷,更易用;

JSON的可读性、可扩展性都非常好,编码难度也比较低,即使不借助工具也能写出比较规范的JSON

......

4. JSON怎么用

⑴ JSON的基本语法

① 并列的数据之间用逗号( , )分隔

② 映射用冒号( : )表示

③ 映射的集合用大括号( {} )表示

④ 并列数据的集合用方括号( [] )表示

例如:

上赛季的MVP是斯蒂芬库里,场上位置是控球后卫,球衣号码是30号,球队是金州勇士队

上赛季的FMVP是勒布朗詹姆斯,场上位置是小前锋,球衣号码是23号,球队是克里夫兰骑士队

用JSON格式就可以表示为:

[{
 "MVP":"Stephen Curry",
 "position":"Point Guard",
 "number":"30",
 "team":"Golden State Warriors"
 },{
 "FMVP":"Lebron James",
 "position":"Small Forward",
 "number":"23",
 "team":"Cleveland Cavaliers"
 }]

更复杂的数据也可以使用JSON来进行表示,比如下面这段信息:最喜欢的编辑器是sublime,最喜欢的运动是篮球,最喜欢的球队是马刺队,马刺队控卫有托尼帕克、帕蒂米尔斯,分卫有马努吉诺比利、丹尼格林,小前锋有科怀伦纳德、凯尔安德森,大前锋有拉马库斯阿尔德里奇、大卫李,中锋有德维恩戴德蒙、保罗加索尔。

{
 "favoriteEditor": "sublime",
 "favoriteSport": "basketball",
 "favoriteTeam":{
 "Spurs":[
 {
  "PG":"Tony Parker",
  "SG":"Danny Green",
  "SF":"Kawhi Leonard",
  "PF":"LaMarcus Aldridge",
  "C":"Pau Gasol" 
 },
 {
  "PG":"Patty Mills",
  "SG":"Manu Ginobili",
  "SF":"Kyle Anderson",
  "PF":"David Lee",
  "C":"Dewayne Dedmon" 
 }
 ]
 }
 }

⑵ JSON的解析与序列化

① 通过eval()函数将JSON字符串解析为JavaScript原生值

var str = '[{"name":"james","height":"203","number":"23"}, {"name":"kobe","height":"198","number":"24"}]'; //定义JSON字符串
 var oJson = eval(str); //通过eval()函数解析拿到JavaScript原生值
 //接下来便可通过JS进行操作
 alert(oJson[0].name); //james
 alert(oJson[1].height); //198

② 通过全局对象JSON的两个方法parse()和stringify()进行操作

parse()可以将JSON字符串转化为JavaScript原生值:

var str = '[{"name":"james","height":"203","number":"23"},{"name":"kobe","height":"198","number":"24"}]';  //定义JSON字符串
 var oJson = JSON.parse(str); //通过JSON对象的parse方法得到该JSON字符串的JavaScript原生值
 document.write("姓名:" + oJson[1].name + "<br/>" + "身高:" + oJson[1].height + "cm" + "<br/>" + "球衣号码:" + oJson[1].number);

javascript学习之json入门

parse()也可以传第二个参数,此时可以在还原出JavaScript值的时候将原值替换成自己想要的值,如下:

var str = '[{"name":"james","height":"203","number":"23"},{"name":"kobe","height":"198","number":"24"}]';
 var oJson = JSON.parse(str, function(key, value){
 if('name' == key){
 return '球员' + value;
 }else if('number' == key){
 return value + '号球衣';
 }else{
 return value;
 }
 });
 alert(oJson[0].name + '更牛逼还是' + oJson[1].name + '更牛逼' + '\n' + '你喜欢' + oJson[0].number + '还是' + oJson[1].number);

 javascript学习之json入门

stringify()可以将原生JavaScript值转换为JSON字符串:

var oJson = [{
 name : "james",
 height : 203,
 number : 23
 },{
 name : "kobe",
 height : 198,
 number : 24
 }];
 var jsonStr = JSON.stringify(oJson,['name','number'],4);
 alert(jsonStr);

javascript学习之json入门

JSON.stringify(oJson,['name','number'],4);中的第一个参数表示需要转化的JS对象;第二个参数用于过滤结果,表示只留下name和number,其他的key以及所对应的的value都不要了;第三个参数表示在JSON字符串中保留的缩进数,有缩进时可读性更高,该参数也可以是一个字符串,比如'----',此时弹出结果如下:

javascript学习之json入门

如果不需要保留缩进,那么最后一个参数空起来即可,但如果不需要进行过滤,第二个参数需设置为null占位,不能空起来,否则最后一个参数也会失效。

第二个参数也可以是函数,函数可以进行更加复杂的过滤:

var oJson = [{
 name : "james",
 height : 203,
 position : '小前锋'
 },{
 name : "kobe",
 height : 198,
 position : '得分后卫'
 }];
 var jsonStr = JSON.stringify(oJson,function(key,value){
 switch(key){
 case 'name':
 return '球员 ' + value;
 case 'height':
 return '身高 ' + value + 'cm';
 case 'position':
  return '位置 ' + value;
 default:
 return value;
 }
 },4);
 alert(jsonStr);

javascript学习之json入门

支持JSON对象的浏览器有IE8+、Chrome、FireFox3.5+、Opera10.5+、Safari4+,不支持的浏览器可以通过json.js这一开源库来进行模拟。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 #Javascript
js微信支付实现代码
Dec 22 #Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 #Javascript
Html中 IFrame的用法及注意点
Dec 22 #Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 #Javascript
BootStrap3使用错误记录及解决办法
Dec 22 #Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 #Javascript
You might like
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python获取整个网页源码的方法
2020/08/03 Python
python打包多类型文件的操作方法
2020/09/21 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
四年级下册教学反思
2014/02/01 职场文书
《画》教学反思
2014/04/14 职场文书
班长演讲稿范文
2014/04/24 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
煤矿安全生产标语
2014/06/06 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
高中英语教学反思范文
2016/03/02 职场文书