JSON是一个轻量级的数据格式,可以简化表示数据结构的工作量。在实际工作中,我们经常用它来传递数据,不过对于其使用的一些细节还是需要注意的。在ECMAScript5中定义了原生的JSON对象,可以用来将对象序列化为JSON字符串,或者将JSON数据解析为javascript对象。

一、JSON语法

JSON可以用来表示三种类型的值:简单值、对象和数组。对象和数组一般是JSON结构的最外层形式。

1.JSON简单值

可以在JSON中表示字符串、数值、布尔值、null。

例如:

5//数值类型"hello json"//字符串类型

注意:

①JSON不支持js中的特殊值undefined;

②JSON字符串必须使用双引号,不能使用单引号。

③在实际应用中,JSON一般用来表示较复杂的数据结构,而简单值一般用作复杂数据结构中的一部分。

2.对象

JSON对象与JavaScript对象字面量对象的语法是类似的。

//JavaScript对象字面量表示
var jsWeatherinfo={city:"北京",cityid:"101010100",weather:"多云转晴"
//JSON对象
{"city":"北京","cityid":"101010100","weather":"多云转晴"
}

但是有几点不同:

①JSON中没有变量的概念,所以没有声明变量;

②JSON末尾没有分号;

③JSON对象中的属性名一定要使用双引号,而JavaScript对象中的属性引号是可有可无的。

3.数组

JSON数组采用的是javascript的数组字面量形式.

//JavaScript数组var result=[1,true,"today"];//JSON数组

[1,true,"today"]

区别:JSON数组没有末尾的分号,也没有声明变量.

二、JSON序列化

1.JSON对象

JavaScript的eval()函数可以用来解析JSON并返回JavaScript对象,不过eval()对JSON结构求值是存在风险的.因此,在ECMAScript5中新增了全局的JSON对象.JSON对象有两个方法:stringify()和parse().

stringify()用于把JavaScript对象序列化为JSON字符串;

parse()用于把JSON字符串解析为原生的JavaScript值.

var weather={
'city': '北京',
'cityid': '101010100',
'temp1': '31℃',
'temp2': '20℃',
'weather': '多云转晴',
'img1': 'd1.gif',
'img2': 'n0.gif',
'ptime': '11:00'
};
var text=JSON.stringify(weather);
var json=JSON.parse(text);
json.weather;//"多云转晴"

2.JSON.stringify()

JSON.stringify()方法有三个参数:

第一个参数是要序列化的JavaScript对象;

第二个参数是过滤器,可以是一个数组或者函数;

第三个参数是一个布尔值,表示是否在JSON字符串中保留缩进.

①过滤器

如果过滤器参数是数组,那么stringify()结果中只包含该数组中列出的属性.

var weather={
'city': '北京',
'cityid': '101010100',
'temp1': '31℃',
'temp2': '20℃',
'weather': '多云转晴',
'img1': 'd1.gif',
'img2': 'n0.gif',
'ptime': '11:00'
};
var text=JSON.stringify(weather,["city","weather","temp1","temp2"]);
//结果:"{"city":"北京","weather":"多云转晴","temp1":"31℃","temp2":"20℃"}"

如果过滤器是函数,传入的函数有两个参数:属性名和属性值.根据属性名来判断如何处理序列化对象中相应的属性.如果函数返回了undefined,那么相应的属性就会被忽略.

var text1 = JSON.stringify(weather, function (key, value) {
switch (key) {
case 'temp1':
return '最高温度' + value;
case 'temp2':
return '最低温度' + value;
case 'img1':
case 'img2':
case 'ptime':
return undefined;//属性被忽略
default:
return value;
}
});
//结果:"{"city":"北京","cityid":"101010100","temp1":"最高温度31℃","temp2":"最低温度20℃","weather":"多云转晴"}"

③字符串缩进

JSON.stringify()第三个参数用来控制结果中的缩进情况.

如果缩进参数传入的是数值,表示每个json字段缩进的空格数,但是最大缩进空格数不超过10.

var text2=JSON.stringify(weather,null,5)

如果缩进参数传入的是字符串,则表示JSON字符串中每个级别都使用该字符串作为缩进字符.不过该字符串也不能超过10个字符长.

var text3=JSON.stringify(weather,null,"--")

④toJSON()方法

如果JSON.stringify()不能满足某些对象的序列化需求,可以给对象自定义toJSON方法,返回其自身的JSON数据格式。

var weather={
'city': '北京',
'cityid': '101010100',
'temp1': '31℃',
'temp2': '20℃',
'weather': '多云转晴',toJSON:function(){return this.city+this.weather+",最高温度"+this.temp1+",最低温度"+this.temp2;}
};
JSON.stringify(weather);//""北京多云转晴,最高温度31℃,最低温度20℃""

综合以上几种情况,JSON.stringify()序列化对象的顺序如下:

①如果对象存在toJSON方法且能返回有效值,则调用该方法;否则,仍然按照默认顺序执行序列化。

②如果stringify()存在第二个参数,应用这个过滤器;

③对第②步返回的每个值进行序列化;

④如果存在第三个参数,执行相应的格式化。

三、JSON解析

JSON.parse()用来将JSON字符串解析成JavaScript对象。

该方法第一个参数要解析的JSON字符串;

第二个参数是一个函数还原函数。还原函数有两个参数key和value。如果还原函数返回undefined,则表示将该属性从结果中删除;如果返回其它值,则将该值插入到结果当中。在将日期字符串转换为Date对象时,经常用到还原函数.

var json = {'city': '北京','cityid': '101010100','temp1': '19℃','temp2': '32℃','weather': '晴','ptime': new Date()
};
var text = JSON.stringify(json);
JSON.parse(text, function (key, value) {switch (key) {case 'ptime':return new Date(value);//返回日期对象case 'cityid':return undefined;//删除该属性default:return value;}
});

读javascript高级程序设计13-JSON相关推荐

  1. 读javascript高级程序设计-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/> 本笔记是为了方便日后查阅,仅作学习交 ...

  2. 读javascript高级程序设计15-Ajax,CORS,JSONP,Img Ping

    平时用惯了jQuery.ajax之类的方法,却时常忽略了它背后的实现,本文是学习了AJAX基础及几种跨域解决方案之后的一些收获. 一.AJAX--XMLHttpRequest 谈起Ajax我们都很熟悉 ...

  3. 读javascript高级程序设计10-DOM

    一.节点关系 元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headline ...

  4. 读javascript高级程序设计02-变量作用域

    一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs=" ...

  5. 读javascript高级程序设计12-HTML5脚本编程

    一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性, ...

  6. 读javascript高级程序设计03-函数表达式、闭包、私有变量

    一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); functi ...

  7. 读javascript高级程序设计11-事件

    一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件 ...

  8. 读javascript高级程序设计06-面向对象之继承

    原型链是实现继承的主要方法,通过原型能让一个引用类型继承另一个引用类型. 1.原型链实现继承 function SuperType(){ this.superprop=1; } SuperType.p ...

  9. 读javascript高级程序设计04-canvas

    一.基本用法 1.要使用canvas元素,需要先给定其width和height来设置绘图区域的大小.canvas中间的文本会在浏览器不支持canvas的情况下显示出来. <canvas widt ...

最新文章

  1. R语言ggplot2可视化分面图(facet_grid)、自定义缩小分面图标签栏的高度、但是不改变标签栏标签文本的大小、通过element_text函数的margin参数设置实现
  2. Crawler:基于requests库+urllib3库+伪装浏览器实现爬取抖音账号的信息数据
  3. mitmproxy可谓神器乎?
  4. vuex获取php数据,Nuxt中如何使用Vuex-Store异步获取数据
  5. 基于spring多数据源动态调用及其事务处理
  6. 学习Unix其实就这样简单
  7. 解决 vim 报错:the imp module is deprecated in favour of importlib
  8. c51中的_crol_和_cror_
  9. 毕业设计结论计算机应用技术,计算机应用技术(网络、软件)毕业设计实施方案...
  10. 解读2017年云计算发展趋势 — 简本
  11. Win32开发笔记(一):整体流程
  12. 去湘菜馆,该不该来壶酸梅汁?
  13. Python——爬取单章小说内容
  14. vue之table案例
  15. flex 实现水平布局 三等分
  16. Django_使用class写views
  17. gateway的基本使用
  18. 仿射密码之加解密及破解
  19. 淘宝开放平台开发指南之熟悉API族
  20. 初中计算机的组成试讲教案模板小学语文,小学语文面试试讲教案万能模板

热门文章

  1. 可视化图形(二):热力图-imshow()
  2. 属性总结(三):plt.rcParams
  3. NumPy - np.linspace()
  4. Linux 线程与互斥锁的使用
  5. 物理DG主备库切换时遇到ORA-16139: media recovery required错误
  6. Centos6.8上httpd配置腾讯云SSL证书
  7. C#IList 取区间数据
  8. 【学习笔记】Node.js学习笔记(二)
  9. 聚类算法之DBScan(Java实现)[转]
  10. MAC地址如何在windows与unix下查看?