读javascript高级编程13-JSON

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;
  }
});
时间: 2024-10-26 09:16:31

读javascript高级编程13-JSON的相关文章

读javascript高级编程11-事件

一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件. 3.DOM事件流 DOM2级事件包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 二.事件处理程序 事件处理程序就是响应某些事件的函数,如onclick等. 1. DOM0级事件处理程序 每个元素都有自己的事件处理程序属性,如o

读javascript高级编程02-变量作用域

一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs="?debug=true"; with(location){ var url=href+qs; } return url; } buildUrl(); //result:http://www.fanxbao.com/?debug=true ②try...catch...中的catch语句块延长作用域链

读javascript高级编程07-引用类型、Object、Array

一.引用类型 ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法. 创建对象实例的方法时是用new 操作符加构造函数:var p=new Person(). 二.Object类型 1.创建Object实例两种方式: 使用new操作符跟Object构造函数. var o = new Object(); o.name = 'dami'; o.age = 25; 使用对象字面量表示法,推荐这种方式,代码量小而且看上去有封装的感觉. var o = { name: 'd

读javascript高级编程10-DOM

一.节点关系 元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headlines=document.getElementById("headline_block"); var childs=headlines.childNodes; childs.length;//1 childs[0];//取第一个子节点 childs.item(0);//取第一个子节点 pare

读javascript高级编程08-引用类型之Global、Math、String

一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encodeComponentURI():主要用于对URI中的某一部分进行编码,很常用的是对查询字符串参数进行编码.它会对所有非标准字符进行编码. 对应的解码方法是decodeURI()和decodeURIComponent. var uri='http://www.cnblogs.com?a=1 2&b=陈

读javascript高级编程03-函数表达式、闭包、私有变量

一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); function test(){ alert(1); } 2.函数表达式不会进行函数提升,函数调用在函数声明之前的话会报错: test(); // test is not a function var test=function(){ alert(1); } 二.递归函数 递归函数是通过在函数内部调用自身实现的

读javascript高级编程09-BOM

一.window 1.在全局作用域中定义的变量和函数会被归在window对象. var a=1,b=2; function add(a,b){ return a+b; } console.log(window.a);//1 console.log(window.add(a,b));//3 有点区别在于,全局变量不能用delete删除,而直接在window对象定义的属性可以用delete删除. 2.计算窗口位置: var leftpos=typeof window.screenLeft=="num

读javascript高级编程12-HTML5脚本编程

一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性,如果发现域不匹配则不会进行操作. 2.接收消息 接收到消息时,会触发window对象的message事件.传递给onmessage事件处理程序的对象主要包含三个信息: data:对应postMessage()第一个参数传入的内容: origin:发送消息的文档所在域.接收到消息后,检测消息来源是非常

读javascript高级编程05-面向对象之创建对象

1.工厂模式 工厂模式是一种常用的创建对象的模式,可以使用以下函数封装创建对象的细节: function CreatePerson(name,age){ var p=new Object(); p.name=name; p.age=age; p.speak=function(){ console.log("my name is "+p.name); } return p; } var p1=CreatePerson('Wang',15); p1.speak(); var p2=Crea