余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

互联网前端开发技术之JavaScript JSON语法详解

xiyangw 2022-11-25 11:40 62 浏览 0 评论

JSON语法

JSON和XML类型,都是一种结构化的数据表示方式。所以,JSON并不是JavaScript独有的数据格式,其他很多语言都可以对JSON进行解析和序列化。

JSON的语法可以表示三种类型的值:

①简单值:可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JavaScript中的特殊值undefined。

②对象:顾名思义。

③数组:顾名思义。

1.简单值

"Lee"这两个量就是JSON的表示方法,一个是JSON数值,一个是JSON字符串。布尔值和null也是有效的形式。但实际运用中要结合对象或数组。

2.对象

JavaScript对象字面量表示法:

var box = { 
 name : 'Lee', 
 age : 100 
}; 

而JSON中的对象表示法需要加上双引号,并且不存在赋值运算和分号:

{ 
 "name" : "Lee", //使用双引号,否则转换会出错 
 "age" : 100 
} 

3.数组

JavaScript数组字面量表示法:

var box = [100, 'Lee', true];

而JSON中的数组表示法同样没有变量赋值和分号:

[100, "Lee", true]

一般比较常用的一种复杂形式是数组结合对象的形式:

[ 
 { 
 "title" : "a", 
 "num" : 1 
 }, 
 { 
 "title" : "b", 
 "num" : 2 
 }, 
 { 
 "title" : "c", 
 "num" : 3 
 } 
 ]

PS:一般情况下,我们可以把JSON结构数据保存到一个文本文件里,然后通过XMLHttpRequest对象去加载它,得到这串结构数据字符串(XMLHttpRequest对象将在Aajx章节中详细探讨)。所以,我们可以模拟这种过程。

模拟加载JSON文本文件的数据,并且赋值给变量。

	var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; 

PS;上面这短代码模拟了var box = load('demo.json');赋值过程。因为通过load加载的文本文件,不管内容是什么,都必须是字符串。所以两边要加上双引号。

其实JSON就是比普通数组多了两边的双引号,普通数组如下:

	var box = [{name : 'a', age : 1},{name : 'b', age : 2}]; 

4.解析和序列化

如果是载入的JSON文件,我们需要对其进行使用,那么就必须对JSON字符串解析成原生的JavaScript值。当然,如果是原生的JavaScript对象或数组,也可以转换成JSON字符串。

对于讲JSON字符串解析为JavaScript原生值,早期采用的是eval()函数。但这种方法既不安全,可能会执行一些恶意代码。

varbox = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; 
alert(box); //JSON字符串 
varjson = eval(box); //使用eval()函数解析 
alert(json); //得到JavaScript原生值 

ECMAScript5对解析JSON的行为进行规范,定义了全局对象JSON。支持这个对象的浏览器有IE8+、Firefox3.5+、Safari4+、Chrome和Opera10.5+。不支持的浏览器也可以通过一个开源库json.js来模拟执行。JSON对象提供了两个方法,一个是将原生JavaScript值转换为JSON字符串:stringify();另一个是将JSON字符串转换为JavaScript原生值:parse()。

var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; //特别注意,键要用双引号 
alert(box); 
var json = JSON.parse(box); //不是双引号,会报错 
alert(json); 
var box = [{name : 'a', age : 1},{name : 'b',age : 2}]; //JavaScript原生值 
var json = JSON.stringify(box); //转换成JSON字符串 
alert(json); //自动双引号 

在序列化JSON的过程中,stringify()方法还提供了第二个参数。第一个参数可以是一个数组,也可以是一个函数,用于过滤结果。第二个参数则表示是否在JSON字符串中保留缩进。

varbox = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}]; 
var json = JSON.stringify(box, ['name', 'age'],4); 
alert(json); 

PS:如果不需要保留缩进,则不填即可;如果不需要过滤结果,但又要保留缩进,则讲过滤结果的参数设置为null。如果采用函数,可以进行复杂的过滤。

varbox = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}]; 
var json = JSON.stringify(box, function (key, value) { 
 switch (key) { 
 case 'name' : 
 return'Mr.' + value; 
 case 'age' : 
 returnvalue + '岁'; 
 default: 
 returnvalue; 
 } 
}, 4); 
alert(json); 

PS:保留缩进除了是普通的数字,也可以是字符。

还有一种方法可以自定义过滤一些数据,使用toJSON()方法,可以将某一组对象里指定返回某个值。

varbox = [{name : 'a', age : 1, height : 177, toJSON : function () { 
 return this.name; 
}},{name : 'b',age : 2, height : 188, toJSON : function () { 
 return this.name; 
}}]; 
var json = JSON.stringify(box); 
alert(json); 

PS:由此可见序列化也有执行顺序,首先先执行toJSON()方法;如果应用了第二个过滤参数,则执行这个方法;然后执行序列化过程,比如将键值对组成合法的JSON字符串,比如加上双引号。如果提供了缩进,再执行缩进操作。

解析JSON字符串方法parse()也可以接受第二个参数,这样可以在还原出JavaScript值的时候替换成自己想要的值。

varbox = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; 
var json = JSON.parse(box, function (key, value) { 
 if (key == 'name') { 
 return'Mr.' + value; 
 } else { 
 returnvalue; 
 } 
}); 
alert(json[0].name);

总结

通过本篇文章,你可以学习到以下知识点:

1.JSON简单值;

2.对象;

3.数组;

IT技术研习社,专注互联网技术研究与分享,喜欢的朋友可以点击【关注】;把经验传递给有梦想的人;

相关推荐

数控系统常见术语详解,机加工人士必备资料
数控系统常见术语详解,机加工人士必备资料

增量编码器(Incrementpulsecoder)回转式位置测量元件,装于电动机轴或滚珠丝杠上,回转时发出等间隔脉冲表示位移量。由于没有记忆元件,故不能准...

2023-09-24 17:42 xiyangw

功、功率、扭矩的关系

功=功率×时间work=power×timeW=P×T功=力×距离work=force×lengthW=F×LP×T=F×LP=F×L/T=F×V(velocity)具体到电机输出轴上,圆...

Wi-Fi协议(802.11 )常见专业术语汇总
Wi-Fi协议(802.11 )常见专业术语汇总

Wi-Fi协议(802.11)常见专业术语汇总AP(Accesspoint的简称,即访问点,接入点):是一个无线网络中的特殊节点,通过这个节点,无线网络中的...

2023-09-24 17:41 xiyangw

不需要策略模式也能避免满屏if/else
不需要策略模式也能避免满屏if/else

满屏if/elsejava复制代码publicstaticvoidmain(String[]args){inta=1;if...

2023-09-24 17:41 xiyangw

喜极而泣,我终于干掉了该死的 if-else
喜极而泣,我终于干掉了该死的 if-else

推荐阅读:面试淘宝被Tomcat面到“自闭”,学习这份文档之后“吊打”面试官刷完spring+redis+负载均衡+netty+kafka面试题,再去面试BAT...

2023-09-24 17:40 xiyangw

Python中使用三元运算符简化if-else语句
Python中使用三元运算符简化if-else语句

Python是一种极简主义的编程语言,相比其他编程语言,在多个地方简化了代码的写法,可以让我们用更少的时间更简洁地完成工作。以赋值运算符为例:a=a+b简化...

2023-09-24 17:40 xiyangw

雅思课堂 | 雅思口语写作句型第二讲
雅思课堂 | 雅思口语写作句型第二讲

纯干货,无废话用最少的时间学最制胜的内容!泡图书馆泡不过学霸?碎片时间也能弯道超车!向着雅思8分行动起来吧!雅思口语写作句型1.Ipreferseeing...

2023-09-24 17:39 xiyangw

设计模式(三)——简单的状态模式代替if-else
设计模式(三)——简单的状态模式代替if-else

博主将会针对Java面试题写一组文章,包括J2ee,SQL,主流Web框架,中间件等面试过程中面试官经常问的问题,欢迎大家关注。一起学习,一起成长。前言大多数开...

2023-09-24 17:38 xiyangw

如何优化代码中大量的if/else,switch/case?

前言随着项目的迭代,代码中存在的分支判断可能会越来越多,当里面涉及到的逻辑比较复杂或者分支数量实在是多的难以维护的时候,我们就要考虑下,有办法能让这些代码变得更优雅吗?正文使用枚举这里我们简单的定义一...

优秀程序员早就学会用“状态模式”代替if-else了
优秀程序员早就学会用“状态模式”代替if-else了

2020年已经进入倒计时了,大家立好的flag完成了吗?2020实“鼠”不易,希望2021可以“牛”转乾坤。简介状态模式是行为型设计模式的一种。其设计理念是当对...

2023-09-24 17:37 xiyangw

用Select Case语句对执行多条件进行控制
用Select Case语句对执行多条件进行控制

今日的内容是"VBA之EXCEL应用"的第六章"条件判断语句(If...Then...Else)在VBA中的利用"。这讲是第三节...

2023-09-24 17:37 xiyangw

c#入门教程(四)条件判断if else

条件判断,是编程里常用的判断语句,比如某个代码如果满足条件就执行a代码块否则就执行b代码块。案例1:inti=2*5;if(a>0){执行a代码块}elseif(a<0){执行b代码块...

每日学编程之JAVA(十一)—条件语句(if……else)

一个if语句包含一个布尔表达式和一条或多条语句。如果布尔表达式的值为true,则执行if语句中的代码块,否则执行if语句块后面的代码。if语句后面可以跟else语句,当if语句...

不需要策略模式也能避免满屏if/else

除了使用策略模式以外,还可以使用其他设计模式来避免满屏if/else的问题。以下是一些可能的解决方案:工厂模式:将if/else语句移到工厂类中,由工厂类负责创建对象。这样可以将if/else语句从客...

围绕ifelse与业务逻辑的那些梗
围绕ifelse与业务逻辑的那些梗

ifelse很重要,几乎是程序员编程核心,业务逻辑与规则也通过ifelse体现出来,语句简单但是背后文章很大,先看几则幽默图:1.也许默认使用returnf...

2023-09-24 17:36 xiyangw

取消回复欢迎 发表评论: