Javascript学习之:JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于ECMAScript的一个子集,采用完全独立于语言的文本格式。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
1、语法
JSON的语法可以表示三种类型的值:
- 简单值:使用与Javascript相同的语法,可以在JSON中表示字符串、数值、布尔值和null,但是不支持Javascript中的特殊值undefined。
- 对象:对象作为一种复杂数据结构,表示的是一种无序的键值对。每个键值对中的值可以是简单值,也可以是复杂数据类型的值。
- 数组:数组作为一种复杂数据结构,表示一组有序的值的列表,可以通过数值索引来访问其中的值。数组的值可以是任何类型——简单值、对象或数组。
下面详细介绍下这三种类型:
1)、简单值:
数值表示:5
字符串表示:"Hello World!"
JSON字符串与Javascript字符串最大的不同是,JSON字符串必须使用双引号(单引号会引发语法错误)。
2)、对象:
举一个Javascript对象来对比说明,下面是一个Javascript中的对象字面量:
var man = {
name: "McBye",
age: 24
};
而在JSON中,这个对象字面量就必须写成:
{
"name": "McBye",
"age": 24
}
可以看出三个区别:
- 没有声明变量,这是因为JSON中没有变量的概念;
- 没有末尾的分号,因为这不是Javascript语句,不需要分号;
- 对象的属性必须加双引号。
3)、数组:
JSON数组采用的是Javascript中的数组字面量形式。举例如下:
Javascript数组字面量:var man = ["McBye", 24, "pku", true];
JSON中表示的同一个数组:["McBye", 24, "pku", true]
可以看到,JSON数组也没有变量和分号。
将数组和对象结合起来,可以构成更复杂的数据集合,例如上面的JSON数组可以扩充为以下:
[
[
"name": "McBye",
"age": 24,
"college": [
"pku",
"eecs"
]
],
[
"name": "King",
"age": 20,
]
]
2、解析与序列化:
JSON流行的重要原因之一是,JSON数据结构可以和Javascript对象进行双向的解析。
早期的JSON解析器基本上就是使用Javascript的eval()函数。由于使用eval()对JSON数据结构进行求值存在风险,因为可能会执行一些恶意代码。
1)、JSON对象有两个方法:
stringify()——用于把Javascript对象序列化为JSON字符串。
var man = {
name: "McBye",
age: 24,
skills: undefine,
func: function(){//nothing happens...}
};
对上面的Javascript对象序列化:var jsonMan = JSON.stringify(man);
默认情况下,JSON.stringify()输出的JSON字符串不包括任何空格或缩进,因此保存在manCopy中的字符串为:
{"name":"McBye","age":24}
在序列化Javascript对象时,所有的函数和原型成员都会被有意忽略,不体现在结果中,并且值为undefined的任何属性也会被跳过。结果中最终都是值为有效的JSON数据类型的实例属性。
parse()——用于将JSON字符串解析为Javascript对象。
var manCopy = JSON.parse(jsonMan);
man和manCopy两个对象,除了JSON有意忽略的属性和函数之外,其他属性都是相同的,但即使没有这些被忽略的属性与函数,man和manCopy也是完全独立、没有关系的两个对象。
2)、序列化选项:
在实际使用stringify()函数的时候,除了要序列化的Javascript对象外,还可以再加两个参数,这两个参数用于指定以不同的方式序列化Javascript对象。第一个参数是过滤器,可以是一个数组,也可以是一个函数;第二个参数是一个选项,表示是否在JSON字符串中保留缩进。
a、过滤结果:
如果过滤器参数是数组,那么stringify()的结果中仅包含数组中列出的属性。还是以上面的那个例子说明:
var man = {
name: "McBye",
age: 24,
skills: "Javascript",
};
var jsonText = JSON.stringify(man, ["name", "skills"]);
上面的jsonText的值应该是只包含"name"、"skills"两个属性的字符串:
{"name":"McBye","skills":"Javascript"}
如果第二个参数是函数,传入的函数接受两个参数,属性名和属性值。根据属性名可以知道怎么序列化对象中属性。为了改变序列化对象的结果,函数返回的值就是相应属性的值。要注意的是,如果函数返回了undefined,那么相应的属性会被忽略。
var man = {
name: "McBye",
age: 24,
skills: "Javascript",
};
var jsonText = JSON.stringify(man, function(key, value){
switch(key):{
case "name":
return "King";
case "age":
return "secret";
default:
return value;
}
});
经过这个函数过滤器之后,序列化的JSON字符串的结果是:
{"name":"King","age":"secret","skills":"Javascript"}
b、字符串缩进:
JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。如果这个参数是一个数值,那它表示每个级别缩进的空格数。并且,只要传入有效的控制缩进的参数值结果字符串就会包含换行符,这是比较人性化的一个设置呢,不过最大缩进格数为10,超过10的话都会自动转换为10。
c、toJSON()方法:
给对象定义toJSON方法,可以返回其自身的JSON数据格式。可以为任何对象添加toJSON()方法。例如:
var man = {
name: "McBye",
age: 24,
skills: "Javascript",
toJSON: function({return this.name;})
};
var jsonText = JSON.stringify(man);
上述代码执行后jsonText中保存的字符串是"McBye"。
toJSON()可以作为函数过滤器的补充,因此理解序列化的内部顺序非常重要。序列化一个对象的顺序如下:
- 如果存在toJSON()方法而且能通过它取得有效的值,则调用该方法。否则返回对象本身;
- 如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第1步返回的值;
- 对第2步返回的每个值进行相应的序列化;
- 如果提供了第三个参数,执行相应的格式化。
参考资料:《Professional Javascript for Web Developers》,Nicholas C.Zakas
Javascript学习之:JSON的更多相关文章
- javascript学习之JSON
JSON本来是javascript的一个自己,后来已经成为了一种独立的数据格式,在web应用中运用极其广泛. 与javascript对象不同的是,JSON中的属性名任何时候都必须加双引号. javaS ...
- JavaScript学习笔记-JSON对象
JSON 是一种用来序列化对象.数组.数值.字符串.布尔值和 null 的语法.它基于 JavaScript 语法,但是又有区别:一些 JavaScript 值不是 JSON,而某些 JSON 不是 ...
- 10. JavaScript学习笔记——JSON
10. JSON ///[JSON是一种数据格式,不是JS 独有的] ///[JSON语法] /* 1.数据书写格式:"name":value,JSON要求给属性名加上[双引号], ...
- javascript学习-创建json对象数据,遍历
之前我已经有讲过后台返回json数据到前台,并在前台遍历json数据. 这里讲下直接在JS里创建JSON数据,然后遍历使用~ 创建代码例如以下:(创建的是JSON对象) var YearSelect ...
- Json学习总结(1)——Java和JavaScript中使用Json方法大全
摘要:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语 ...
- HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
- JavaScript学习总结-技巧、有用函数、简洁方法、编程细节
整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...
- 第18天 ajax技术和javascript加强(json)
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
- javascript学习-类型判断
javascript学习-类型判断 1.类型判断的的武器 javascript中用于类型判断的武器基本上有以下几种: 严格相等===,用来判断null,undefined,true,false这种有限 ...
随机推荐
- nodejs通过mocha处理运行文件路径下所有js文件
1.获取文件路径: 方式一:整个js文件使用 var path=require('path');var public_path=path.resolve('../testcase/listData/* ...
- [java,2018-02-24] svn检出项目名称不正确
,今天从svn中检出项目时发现,检出项目的名称与实际的不相同,如下图: 这才想起来,当时创建项目时是随意起了个test的名称作为项目名,后来觉得能用,就在me中直接把项目名称改掉,提交到了svn.再从 ...
- jquery中live is not a function的问题
jquery中的live()方法在jquery1.9及以上的版本中已被废弃了,如果使用,会抛出TypeError: $(...).live is not a function错误. 解决方法: 之前的 ...
- 59.纯 CSS 创作彩虹背景文字
原文地址:https://segmentfault.com/a/1190000015352436 修改后地址:https://scrimba.com/c/cqK3LaTQ 感想: 又一次见识到CSS的 ...
- spring cloud整合 websocket 的那些事
我们知道, 现在很多浏览器都已经是直接支持 websocket 协议的了, 除此之外, sockjs, 也可以实现 websocket 功能.. 当然, 其原理是不同的. 一开始 websocket ...
- Mac平台下部署UE4工程到iOS设备的流程
1.开发环境 UE4.Xcode.iOS版本情况如下: 1.UE4:当前最新版本Unreal Engine 4.17.2. 2.Xcode:当前最新版本Xcode9.0. 3.iOS:当前最新版本iO ...
- js:作用域总结1
先说几个概念: 1.js代码从上往下执行 2.变量提升: 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域叫window,window分两个模块,一个叫内存模块,一个叫运行 ...
- Could not find a package configuration file provided by "Sophus",SophusConfig.cmake
CMake Error at CMakeLists.txt:5 (find_package): By not providing "FindSophus.cmake" in CMA ...
- kafka 学习笔记
一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...
- css3属性蒙版:-webkit-mask
-webkit-mask: 蒙版,用于将固定形状设置透明度,形状可以是一个div,也可以是一张图片: 用法:-webkit-mask: radial-gradient(transparent 50px ...