javascript学习之json入门

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);

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);

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);

JSON.stringify(oJson,['name','number'],4);中的第一个参数表示需要转化的JS对象；第二个参数用于过滤结果，表示只留下name和number，其他的key以及所对应的的value都不要了；第三个参数表示在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);

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# json  # JSON 入门教程基础篇 json入门学习笔记  # Ajax与JSON的一些学习总结  # JSON学习笔记  # JSON 教程 json入门学习笔记  # Python解析json文件相关知识学习  # JSON stringify方法原理及实例解析  # Java使用JSON传递字符串注意事项解析  # 10分钟掌握XML、JSON及其解析  # Java解析JSON数据时报错问题解决方案  # javascript解析json格式的数据方法详解  # 10分钟学会js处理json的常用方法  # 第二个  # 最喜欢  # 这一  # 不需要  # 数据交换  # 米尔  # 比利  # 安德森  # 斯蒂芬  # 德里  # 上赛季  # 詹姆斯  # 格林  # 保罗  # 大卫  # 是一个  # 马刺队  # 序列化  # 也有  # 成了 

相关文章： PHP 500报错的快速解决方法  香港服务器网站测试全流程：性能评估、SEO加载与移动适配优化  建站之星免费版是否永久可用？  ,柠檬视频怎样兑换vip？  微信推文制作网站有哪些,怎么做微信推文，急？  网站制作专业公司有哪些,如何制作一个企业网站，建设网站的基本步骤有哪些？  相册网站制作软件,图片上的网址怎么复制？  建站之星安装后界面空白如何解决？  如何通过虚拟机搭建网站？详细步骤解析  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  北京的网站制作公司有哪些,哪个视频网站最好？  建站主机服务器选型指南与性能优化方案解析  制作国外网站的软件,国外有哪些比较优质的网站推荐？  建站之星ASP如何实现CMS高效搭建与安全管理？  建站之星代理商如何保障技术支持与售后服务？  如何在云服务器上快速搭建个人网站？  定制建站流程步骤详解：一站式方案设计与开发指南  企业微网站怎么做,公司网站和公众号有什么区别？  如何在腾讯云服务器上快速搭建个人网站？  建站之星后台密码遗忘如何找回？  建站VPS配置与SEO优化指南：关键词排名提升策略  如何快速搭建支持数据库操作的智能建站平台？  如何在局域网内绑定自建网站域名？  制作充值网站的软件,做人力招聘为什么要自己交端口钱？  专业商城网站制作公司有哪些,pi商城官网是哪个？  婚礼视频制作网站,学习*后期制作的网站有哪些？  *服务器网站为何频现安全漏洞？  ,巨量百应是干嘛的？  魔毅自助建站系统：模板定制与SEO优化一键生成指南  开源网站制作软件,开源网站什么意思？  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  如何用虚拟主机快速搭建网站？详细步骤解析  建站主机是什么？如何选择适合的建站主机？  大连网站制作费用,大连新青年网站，五年四班里的视频怎样下载啊？  如何零基础开发自助建站系统？完整教程解析  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  建站之星Pro快速搭建教程：模板选择与功能配置指南  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台？  家庭建站与云服务器建站，如何选择更优？  如何在橙子建站中快速调整背景颜色？  如何通过IIS搭建网站并配置访问权限？  如何在建站宝盒中设置产品搜索功能？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  如何快速搭建高效服务器建站系统？  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  建站主机选购指南：核心配置与性价比推荐解析  C++中的Pimpl idiom是什么，有什么好处？（隐藏实现）  制作网页的网站有哪些,电脑上怎么做网页？  怀化网站制作公司,怀化新生儿上户网上办理流程？  如何通过多用户协作模板快速搭建高效企业网站？