JSON在JS中的应用
一、 JSON在JS中的应用:
首先解释下JSON对象与普通js对象字面量定义时格式的区别:
Js对象字面量定义格式:
var person = {
name:"Wede",
age:29
};
或者:
var person = {
"name":"Wede",
"age":29
};
而JSON对象的定义格式:
{
"name":"Wede",
"age":29
}
从定义的语法格式上,可归纳区别有三:
1、 JSON对象定义不需要声明变量。
2、 JSON对象的属性名必须加双引号(属性值不一定加);而js对象字面量属性名双引号可加可不加。
3、 JSON对象定义时末尾没有分号。
浏览器对JSON的支持
早期的JSON解析器基本上就是使用JavaScript的eval()函数。由于JSON是JavaScript语法的子集,因此eval()函数可以解析、解释并返回JavaScript对象和数组。然而在旧版本的浏览器中,使用eval()对JSON解析存在着风险,可能会执行一些恶意代码。
后来,ECMAScript 5对解析JSON的行为进行了规范,定义了全局对象JSON。该全局对象有两个方法用于操作JSON字符串和js对象之间的转换:stringify()和parse()。
支持这个全局对象的浏览器有IE8+、Firefox 3.5+、Safari 4+、Chrome和Opera 10.5+。而对于不能原生态支持这个全局对象的老浏览器来说,有一个选择让它们可以获得对这个全局对象的支持,那就是使用一个shim:https://github.com/douglascrockford/JSON-js。
实例演示
//定义一个js对象字面量
var o = {
name: "Wede.Zhao",
birth: new Date("1984-11-29"),
legs: [1,2,3,4],
year: 2016
}
//使用JSON.stringify将js对象转换为JSON字符串
var jsonStr = JSON.stringify(o);
运行结果:
"{"name":"Wede.Zhao","birth":"1984-11-29T00:00:00.000Z","legs":[1,2,3,4],"year":2016}"
//将JSON字符串转换为js对象
var jsObj=JSON.parse(jsonStr);
运行结果:
Object {name: "Wede.Zhao", birth: "1984-11-29T00:00:00.000Z", legs: Array[4], year: 2016}
注意,这里涉及到一个类型转换的问题:birth属性的值本为日期类型的,现在被转换成了字符串格式,比如原来的对象应该是这样的:
Object {name: "Wede.Zhao", birth: Thu Nov 29 1984 08:00:00 GMT+0800 (中国标准时间), legs: Array[4], year: 2016}
而实际却是这样的:
Object {name: "Wede.Zhao", birth: "1984-11-29T00:00:00.000Z", legs: Array[4], year: 2016}
这样一来,我们将无法调用js对象的birth的日期类方法(比如getFullYear()),这就可能偏离了我们的初衷。
那么,为了解决这样的问题,我们需要启用JSON.parse方法的第二个参数,在将JSON字符串转换为js对象的过程中,通过一个匿名函数对JSON的每个键值对进行操作,如下:
var oCopy = JSON.parse(jsonStr, function (key, value) {
if (key == "birth") {
return new Date(value);
}
else {
return value;
}
})
运行结果:
Object {name: "Wede.Zhao", birth: Thu Nov 29 1984 08:00:00 GMT+0800 (中国标准时间), legs: Array[4], year: 2016}
注:JSON.stringify也有同样的功能,用于在将一个js对象转为JSON字符串时对js对象的每个键值对进行操作(还可以对生成结果进行过滤)得到想要的结果。此外,JSON.stringify方法的第三个参数还可以指定是否在生成的JSON字符串中支持缩进。
自定义序列化需求
有时候,JSON.stringify()方法默认的序列化方式不能满足对某些对象序列化的需求,这时候我们就可以同构给js对象定义toJSON()方法来重新制定转换规则,从而得到我们想要的结果。如下:
var o = {
name: "Wede.Zhao",
birth: new Date("1984-11-29"),
legs: [1, 2, 3, 4],
year: 2016,
toJSON: function () {
return this.name + " " + this.birth;
}
}
var mySpecialJsonStr = JSON.stringify(o);
运行结果:
""Wede.Zhao Thu Nov 29 1984 08:00:00 GMT+0800 (中国标准时间)""
JSON在JS中的应用的更多相关文章
- MVC中处理Json和JS中处理Json对象
MVC中处理Json和JS中处理Json对象 ASP.NET MVC 很好的封装了Json,本文介绍MVC中处理Json和JS中处理Json对象,并提供详细的示例代码供参考. MVC中已经很好的封装了 ...
- 【转】MVC中处理Json和JS中处理Json对象
事实上,MVC中已经很好的封装了Json,让我们很方便的进行操作,而不像JS中那么复杂了. MVC中: public JsonResult Test() { JsonResult json = new ...
- eval()解析json以及js中js数组、对象与json之间的转换
http://www.cnblogs.com/myjavawork/articles/1979279.html https://www.cnblogs.com/coder-economy/p/6203 ...
- php和js中json的编码和解码
php中 1)编码 $jsonStr = json_encode($array) 2)解码 $arr = json_decode($jsonStr) <?php echo json_encode ...
- json字符串返回到js中乱码
Ajax 的post请求值返回到js中时出现中文乱码的情况,但是在action中写入时并未乱码,解决办法在action中写入前,加上这两行: request.setCharacterEncoding( ...
- Js中JSON数据交换使用总结
Json格式简介 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是JavaScript原 ...
- JS中json数据的处理
1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12}; json数组: ...
- js中eval详解,用Js的eval解析JSON中的注意点
先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...
- 关于JS中的JSON
早期,一般是使用XML作为互联网上传输结构化数据的,但由于它解析麻烦,字符冗长,因此被轻量级的JSON所逐渐替代.JSON是JavaScript的一个严格子集,利用了JavaScript中一些模式来表 ...
随机推荐
- unigui图形验证码
unigui图形验证码 procedure TMainForm.UniButton1Click(Sender: TObject); var url: SockString; serial: TynSe ...
- 例子:Vue 配合 vue-resource 从接口获取数据
vue-resource 是 vue 的一个与服务器端通信的 HTTP 插件,用来从服务器端请求数据. 结合例子——图片列表来写一下 Vue获取接口数据. html : <div id=&quo ...
- ThinkPHP6.0学习之项目安装页面的开发
在我们做一个项目的时候,如果是自己用或者是给同行用的话往往不需要做一个安装页面的,但是如果是将项目给一些不怎么会操作服务器,不怎么会程序的人用的时候,我们就需要一个安装页面来帮助他们更好的将项目安装好 ...
- fcgi vs. gunicorn vs. uWSGI
fcgi vs. gunicorn vs. uWSGI - Peterbe.comhttps://www.peterbe.com/plog/fcgi-vs-gunicorn-vs-uwsgi uWSG ...
- Java同步数据结构之ConcurrentLinkedDeque
前言 由于LinkedBlockingDeque作为双端队列的实现,采用了单锁的保守策略使其不利于多线程并发情况下的使用,故ConcurrentLinkedDeque应运而生,它是一种基于链表的无界的 ...
- SQL-W3School-高级:SQL JOIN
ylbtech-SQL-W3School-高级:SQL JOIN 1.返回顶部 1. SQL join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据. Join 和 Key 有时为了得到完 ...
- kotlin中类型检查和类型转换
is 和!is操作符,可以在运行时检查一个对象与一个给定的类型是否一致,或者使用与它相反的!is操作符 fun main(arg: Array<String>) { var a :Any= ...
- flask的post,get请求及获取不同格式的参数
flask的post,get请求及获取不同格式的参数 1 获取不同格式参数 1.0 获取json参数 Demo from flask import Flask, request, jsonify ap ...
- Qt编写自定义控件22-蚂蚁线
一.前言 关于蚂蚁线控件,相信很多用过PS的人都知道,在选中某个区域以后,边上的线条会有一种动态流动的效果,这种效果就叫做蚂蚁线,百科的解释是:动物的一种本能现象,领头的蚂蚁以随机的路线走向食物或洞穴 ...
- CentOS7 升级 python3 过程及注意
• 从官网下载python3的压缩包,解压(以3.5.1版本为例)• 创建安装目录(自定义)sudo mkdir /usr/local/python3• cd 进入解压目录sudo ./configu ...