一、 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中的应用的更多相关文章

  1. MVC中处理Json和JS中处理Json对象

    MVC中处理Json和JS中处理Json对象 ASP.NET MVC 很好的封装了Json,本文介绍MVC中处理Json和JS中处理Json对象,并提供详细的示例代码供参考. MVC中已经很好的封装了 ...

  2. 【转】MVC中处理Json和JS中处理Json对象

    事实上,MVC中已经很好的封装了Json,让我们很方便的进行操作,而不像JS中那么复杂了. MVC中: public JsonResult Test() { JsonResult json = new ...

  3. eval()解析json以及js中js数组、对象与json之间的转换

    http://www.cnblogs.com/myjavawork/articles/1979279.html https://www.cnblogs.com/coder-economy/p/6203 ...

  4. php和js中json的编码和解码

    php中 1)编码 $jsonStr = json_encode($array) 2)解码 $arr = json_decode($jsonStr) <?php echo json_encode ...

  5. json字符串返回到js中乱码

    Ajax 的post请求值返回到js中时出现中文乱码的情况,但是在action中写入时并未乱码,解决办法在action中写入前,加上这两行: request.setCharacterEncoding( ...

  6. Js中JSON数据交换使用总结

    Json格式简介 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是JavaScript原 ...

  7. JS中json数据的处理

    1.  json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12}; json数组: ...

  8. js中eval详解,用Js的eval解析JSON中的注意点

    先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...

  9. 关于JS中的JSON

    早期,一般是使用XML作为互联网上传输结构化数据的,但由于它解析麻烦,字符冗长,因此被轻量级的JSON所逐渐替代.JSON是JavaScript的一个严格子集,利用了JavaScript中一些模式来表 ...

随机推荐

  1. Docker-compose的安装和使用

    一.简介 Compose 项目 是 Docker 官方的开源项目 , 负 责实 现对 Docker 容器 集群的快速编排,其前身 是开源项目 Fig, 目前仍然兼容 Fig格式的模板文件. 使用 一个 ...

  2. js for (i=0;i<a.length;a[i++]=0) 中等于0怎么理解?

    js的问题for (i=0;i<a.length;a[i++]=0) 中等于0怎么理解? 很奇怪的一个for循环 竟然是将原来数组的数据全改为0

  3. C之函数返回一个以上的值

    #include<stdio.h> #include<stdlib.h> //函数的返回值不能是数组 void add(int* a,int* b){ *a += 10; *b ...

  4. kvm管理工具Webvirtmgr安装

    虚拟机版本vmware workstation 15.5.0 pro   (也就是linux版) cat /etc/redhat-release CentOS Linux release 7.4.17 ...

  5. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_19-CMS前端页面查询开发-页面原型-Table组件测试

    页面填充内容.用一个表格来显示内容 3.1.2.1 Element-UI介绍 本项目使用Element-UI来构建界面,Element是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面 ...

  6. Qt编写自定义控件34-磁盘容量统计

    一.前言 磁盘容量统计控件,说白了,就是用来统计本地盘符占用的容量,包括但不限于已用空间.剩余空间.总大小.已用百分比等,其中对应的百分比采用进度条显示,该进度条的前景色和背景色及文字颜色可以设置,在 ...

  7. Oracle GoldenGate OGG管理员手册

    第一章 系统实现简述 前言 编写本手册的目的是为系统管理员以及相关操作人员提供 Oracle  Goldengat  软 件的日常维护和使用的技术参考: 3 ORACLE 第二章 OGG 日常维护操作 ...

  8. SpringCloud 与 Dubbo区别

    总览   Dubbo SpringCloud 服务注册中心 Zookeeper Spring Cloud Netfix Eureka 服务调用方式 RPC REST API 服务监控 Dubbo-mo ...

  9. 《剑指offer》数组专题 (牛客10.22)

    目录 // Q01 二维部分有序数组查找 [善用性质] // Q06 旋转数组中的最小元素 [二分 || 暴力] Q13 调整数组顺序使奇数位于偶数前 / Q19 顺时针打印矩阵 [使用边界变量] / ...

  10. thymeleaf如何遍历数据 each循环的使用

    首先在html开始标签中引入一个属性 xmlns:th="http://www.thymeleaf.org" 遍历数据示例 <tbody> <tr th:each ...