javascript学习之json入门

发布时间 - 2026-01-10 22:02:15    点击率:

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的常用方法  # 第二个  # 最喜欢  # 这一  # 不需要  # 数据交换  # 米尔  # 比利  # 安德森  # 斯蒂芬  # 德里  # 上赛季  # 詹姆斯  # 格林  # 保罗  # 大卫  # 是一个  # 马刺队  # 序列化  # 也有  # 成了 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何快速搭建FTP站点实现文件共享?  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  如何快速上传自定义模板至建站之星?  Java解压缩zip - 解压缩多个文件或文件夹实例  Laravel如何使用集合(Collections)进行数据处理_Laravel Collection常用方法与技巧  C语言设计一个闪闪的圣诞树  zabbix利用python脚本发送报警邮件的方法  消息称 OpenAI 正研发的神秘硬件设备或为智能笔,富士康代工  网页设计与网站制作内容,怎样注册网站?  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  东莞专业网站制作公司有哪些,东莞招聘网站哪个好?  如何制作一个表白网站视频,关于勇敢表白的小标题?  php485函数参数是什么意思_php485各参数详细说明【介绍】  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  在centOS 7安装mysql 5.7的详细教程  laravel怎么在请求结束后执行任务(Terminable Middleware)_laravel Terminable Middleware请求结束任务执行方法  昵图网官网入口 昵图网素材平台官方入口  网站制作大概多少钱一个,做一个平台网站大概多少钱?  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站?  高防服务器租用指南:配置选择与快速部署攻略  如何快速打造个性化非模板自助建站?  无锡营销型网站制作公司,无锡网选车牌流程?  Laravel如何配置中间件Middleware_Laravel自定义中间件拦截请求与权限校验【步骤】  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  高防服务器租用首荐平台,企业级优惠套餐快速部署  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  软银砸40亿美元收购DigitalBridge 强化AI资料中心布局  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  英语简历制作免费网站推荐,如何将简历翻译成英文?  Laravel Docker环境搭建教程_Laravel Sail使用指南  Laravel如何生成和使用数据填充?(Seeder和Factory示例)  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛,就是里面都是武汉人的?  香港服务器建站指南:免备案优势与SEO优化技巧全解析  如何快速配置高效服务器建站软件?  Laravel如何实现API资源集合?(Resource Collection教程)  如何用5美元大硬盘VPS安全高效搭建个人网站?  Linux安全能力提升路径_长期防护思维说明【指导】  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  Laravel如何使用Passport实现OAuth2?(完整配置步骤)  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  Python函数文档自动校验_规范解析【教程】  高端建站如何打造兼具美学与转化的品牌官网?  Python文件操作最佳实践_稳定性说明【指导】  如何在 React 中条件性地遍历数组并渲染元素  如何快速搭建二级域名独立网站?  香港服务器如何优化才能显著提升网站加载速度?  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  HTML 中动态设置元素 name 属性的正确语法详解  独立制作一个网站多少钱,建立网站需要花多少钱?