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对象。
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对象字符串的关系 jsonObj<->JsonString
JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...
- JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求
JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...
- JavaScript -- JSON.parse 函数 和 JSON.stringify 函数
JavaScript -- JSON.parse 函数 和 JSON.stringify 函数 1. JSON.parse 函数: 使用 JSON.parse 可将 JSON 字符串转换成对象. &l ...
- 细读 php json数据和JavaScript json数据
关于JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强 5.容 ...
- JavaScript JSON AJAX 同源策略 跨域请求
网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...
- javascript.json snippets vscode 注释
vscode vue js里面的注释 javascript.json { // Place your global snippets here. Each snippet is defined und ...
- javascript json写法
javascript json写法 var shuxing = {name:"super",sex:"19",work:"IT"}; 这个k ...
- JavaScript JSON 与 AJAX
JavaScript JSON 与 AJAX JSON 是一种轻量的数据交互格式,与 AJAX 配合完成前端页面与服务端的信息传递,本文介绍 JSON 的使用.原生 AJAX 写法.JSONP 跨域解 ...
- javascript json字符串与对象相互转换
在实际项目中,经常遇到字符格式的问题,记下来以便日后方便查看.用到两个函数:JSON.stringify() 和 JSON.parse(). 使用ajax向后台请求数据,后台给前端返回数据,明明后端脚 ...
- Sublime Text插件:HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
随机推荐
- 使用python拼接多张图片.二三事
前几日在博客上看到一篇“使用python拼接多张图片”的Blog[具体是能将的图片名字必须是形如xx_1.png ... xx_100.png或者xx_001.png ... xx_100.png,拼 ...
- 考勤系统代码分析——主页布局easyui框架
考勤系统主页的布局用的是easyui的Layout控件 Layout:布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽其边框改变大小 ...
- 关于laravel 5.3 使用redis缓存出现 找不到Class 'Predis\Client' not found的问题
昨天使用5.3.版本的laravel框架开发公司新项目, 发现将cache和session设置为了redis,执行了一下首页访问. 如图: laravel 版本号 简单配置一下控制器路由, Route ...
- 把w3schools英文版的所有属性扒下来了,免费分享。
为了方便查手册等,把w3schools上的所以属性弄成json版的了,到时候再修改一下,查起来就比较方便了,这里免费分享一下.一共为两份,一份为选择器部分,还有一部分是属性. 选择器部分json 属性 ...
- 扩:new and override
昨天有个网友问我继承里面的new和override关键词有啥区别,呃,我们来看个例子就知道了 new ==>隐藏父类同名方法 override==>覆盖 定义一个父类: public c ...
- LINQ系列:Linq to Object投影操作符
投影是指在将序列中的元素转换为一个自定义形式的操作.投影操作符Select和SelectMany用于选择出赋予了适当功能的值.SelectMany操作符可以处理多个集合. LINQ表达式语法: 1. ...
- MVC遇上bootstrap后的ajax表单模型验证
MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...
- Vue.js学习笔记(6)tree
分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望和小颖分享下.嘻嘻 啦啦啦,代码看这里喽: <div class=" ...
- IOS开发之简单音频播放器
今天第一次接触IOS开发的UI部分,之前学OC的时候一直在模拟的使用Target-Action回调模式,今天算是真正的用了一次.为了熟悉一下基本控件的使用方法,和UI部分的回调,下面开发了一个特别简易 ...
- Shell脚本一枚
脚本如下: #!/bin/bash dir=$1 dir1="" for file in `find $dir -type f` do dir2=${file%/*} name=$ ...