开发者社区> 技术小胖子> 正文

读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;
  }
});
复制代码





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 递归遍历json串获取相关数据
JavaScript 递归遍历json串获取相关数据
23 0
JSON 字符串转换为 JavaScript 对象
JSON 字符串转换为 JavaScript 对象
17 0
【JavaScript】46_对象的序列化——JSON
# 3、对象的序列化 对象的序列化 - JS中的对象使用时都是存在于计算机的内存中的 - 序列化指将对象转换为一个可以存储的格式 **在JS中对象的序列化通常是一个对象转换为字符串(JSON字符串)** - 序列化的用途(对象转换为字符串有什么用): - 对象转换为字符串后,可以将字符串在不同的语言之间进行传递 甚至人可以直接对字符串进行读写操作,使得JS对象可以不同的语言之间传递 - 用途: 1. 作为数据交换的格式 2. 用来编写配置文字 - 如何进行序列化:
50 0
为啥 JSON 之父要建议:退役 JavaScript
道格拉斯:我们今天能对 JavaScript 做的最好的事就是将它退役。
41 0
JavaScript—JSON
JSON几乎是目前前后端交互最常用的数据格式,所以JSON对象使用的频率也很高。JSON对象只提供了两个方法,一个用于序列化JSON(将JavaScirpt对象转换成JSON,JSON.parse),一个用于反序列化JSON(将JSON转换成JavaScript对象,JSON.stringify)。
42 0
javascript实现省市区三级联动选择的代码(数据为模拟json数据)
javascript实现省市区三级联动选择的代码(数据为模拟json数据):
199 0
JavaScript中获取JSON文件中的数据
以上方式获取到的数据都是 JSON 格式的数据,无需转换,即可使用
69 0
你不容错过的JavaScript高级语法(JSON细析, 浏览器数据存储)
你不容错过的JavaScript高级语法(JSON细析, 浏览器数据存储)
92 0
JSON 和JavaScript 介绍与区别
Web 开发依赖于 JavaScript,但什么是 JSON,以及 JSON 与 JavaScript 的区别是什么?了解WEB背后的技术对于寻求创新和充分利用可用资源的团队来说非常重要。所有与WEB相关的东西都将使用 JavaScript。
165 0
如何使用 JavaScript 扁平化 / 非扁平化嵌套 JSON 对象?
前端开发中,特别有接触过树形结构组件的项目中,这些组件很多都需要对JSON对象进行扁平化,而获取属性数据又需要对数据进行反操作。本文以代码的形式来展示如何使用 JavaScript 扁平化/非扁平化嵌套的 JSON 对象。
260 0
JSON(JavaScript Object Notation)标准的数据交换格式。
JSON是指JavaScript Object Notation(JavaScript对象标记)简称JSON。(数据交换格式)JSON主要作用是:一种标准的数据交换格式。JSON以JS对象的形式存在!JSON是一种标准的,轻量级的数据交换格式。
54 0
JavaScript 对象入门使用JSON
JavaScript对象表示法(JSON)是用于将结构化数据表示为JavaScript对象的标准格式,通常用于在网站上表示和传输数据
81 0
详谈JSON与JavaScript
详谈JSON与JavaScript
69 0
学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象
学习javaScript必知必会(6)~类、类的定义、prototype 原型、json对象
71 0
+关注
技术小胖子
文章
问答
视频
相关电子书
更多
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多