JS高程3:JSON
JSON,JavaScript Object Notation,JS对象表示法,是目前最常见的传输结构化数据的数据结构。
JSON并非编程语言,而是一种数据结构,像mp4、avi一样,只是一种数据格式而已。(数据结构可以包含很多数据类型)
JSON值的类型
- 简单值
- 对象
- 数组
简单值:字符串、数字、布尔值和null,注意不包括undefined。
注意:JSON中的字符串必须用双引号。
对象:对象就是无序的键值对,而键值中的值也可以是简单值、对象或者数组。
注意:JSON中对象的属性必须用双引号括起来,JSON中没有变量的概念。
数组:有序的值的列表,而值本身可以是简单值、对象或者数组。
解析与序列化
JS中有个全局对象JSON,该对象有stringify()和parse()方法,分别用来序列化JS和解析JSON。
var obj = {
name: "leo",
age: 19,
marry: false,
other: undefined,
none: null,
};
var j1 = JSON.stringify(obj);
console.log(j1);
var j2 = JSON.parse(j1);
console.log(j2)
注意:因为JSON中没有undefined数据类型,所以该键值会被忽略。
{"name":"leo","age":19,"marry":false,"none":null}
{name: "leo", age: 19, marry: false, none: null}
序列化选项
JSON.stringify()函数还可以接收第二个和第三个参数,用来实现更为丰富的功能。
过滤
第二个参数可以是一个数组,数组包含对象属性的字符串形式:
var obj = {
name: "leo",
age: 19,
marry: false,
other: undefined,
none: null,
};
var j1 = JSON.stringify(obj,["name","age",]);
console.log(j1); //{"name":"leo","age":19}
如果参数是函数:
var obj = {
name: "leo",
age: 19,
marry: false,
other: undefined,
none: null,
};
var j1 = JSON.stringify(obj,function(key,value){
switch(key){
case "age":
return 20;
case "none":
return "没有";
case "marry":
return "false";
default:
return value;
}
});
console.log(j1); //{"name":"leo","age":20,"marry":"false","none":"没有"}
缩进
如果想缩进4空格:
var obj = {
name: "leo",
age: 19,
marry: false,
other: undefined,
none: null,
};
var j1 = JSON.stringify(obj,null,4);
console.log(j1);
{
"name": "leo",
"age": 19,
"marry": false,
"none": null
}
注意:最大缩进为10格。
特殊字符:
var obj = {
name: "leo",
age: 19,
marry: false,
other: undefined,
none: null,
};
var j1 = JSON.stringify(obj,null,"-->");
console.log(j1);
{
-->"name": "leo",
-->"age": 19,
-->"marry": false,
-->"none": null
}
使用toJSON:
var obj = {
name: "leo",
age: 19,
marry: false,
other: undefined,
none: null,
toJSON: function(){
return this.name;
}
};
var j1 = JSON.stringify(obj);
console.log(j1); //"leo"
序列化该对象的顺序如下
(1) 如果存在 toJSON()方法而且能通过它取得有效的值,则调用该方法。否则,返回对象本身。
(2) 如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第(1)步返回的值。
(3) 对第(2)步返回的每个值进行相应的序列化。
(4) 如果提供了第三个参数,执行相应的格式化。
解析选项
JSON.parse()方法也可以接收另一个参数,该参数是一个函数,将在每个键值对儿上调用 。
var obj = {
name: "leo",
age: 19,
marry: false,
other: undefined,
none: null,
releaseDate: new Date(2011, 11, 1),
};
var j1 = JSON.stringify(obj);
console.log(j1);
var j2 = JSON.parse(j1,function(key,value){
if (key == "releaseDate"){
return new Date(value);
} else {
return value;
}
});
console.log(j2);
console.log(j2.releaseDate.getFullYear());
{"name":"leo","age":19,"marry":false,"none":null,"releaseDate":"2011-11-30T16:00:00.000Z"}
{name: "leo", age: 19, marry: false, none: null, releaseDate: Thu Dec 01 2011 00:00:00 GMT+0800 (中国标准时间)}age: 19marry: falsename: "leo"none: nullreleaseDate: Thu Dec 01 2011 00:00:00 GMT+0800 (中国标准时间) {}__proto__: Object
2011
还原函数在遇到"releaseDate"键时,会基于相应的值创建一个新的 Date 对象。结果就是
bookCopy.releaseDate 属性中会保存一个 Date 对象。正因为如此,才能基于这个对象调用
getFullYear()方法。
JS高程3:JSON的更多相关文章
- 对 js 高程 Preflighted Reqeusts 的理解
看JS高程遇到 Preflighted Reqeusts不大理解,遂百度下: 转自:http://todoit.me/ajax-preflight/ 最近在做一个 VUE 的项目的时候, 和后端的小伙 ...
- Js循环读取JSON数据
<script> $(function () { var jsonString = '{Unid:"1",CustomerName:"宋江",Age ...
- 吃透Javascript数组操作的正确姿势—再读《Js高程》
Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...
- MVC中处理Json和JS中处理Json对象
MVC中处理Json和JS中处理Json对象 ASP.NET MVC 很好的封装了Json,本文介绍MVC中处理Json和JS中处理Json对象,并提供详细的示例代码供参考. MVC中已经很好的封装了 ...
- 《JS高程》创建对象的7种方式(完整版)
一.理解对象 ECMA-262定义对象:无序属性的集合,其属性可以包含基本值.对象或者属性. 我们可以把 ECMAScript 的对象想象成 散列表:无非就是一组 名值对,其中值可以是数据或函数. 创 ...
- 《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
- 《JS高程》JS-Object对象整理
继上篇<JS高程>对象&原型笔记,对JavaScript中的Object对象进行了整理,梳理一遍~ 参考文章:详解Javascript中的Object对象 ------------ ...
- js中的json对象详细介绍
JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...
- 【JS对象、JSON字符串】之间的相互转换
在Firefox,chrome,opera,safari,ie9,ie8等浏览器直接可以用JSON对象的stringify()和parse()方法. 1.JSON.stringify(obj)将JS对 ...
随机推荐
- phpok -- 域名问题
nginx会改变连接的baseurl, 所以要改变nginx的server name的配置. 将网站改为静态也需配置nginx.
- 如何修改chrome谷歌浏览器的默认搜索引擎
如图设置,chrome自己提供的百度的引擎,不能用,自己添加一个即可 添加的方法如下:打开百度搜索内容“cai”,然后把搜索的url内容放到上图的网址栏里,并用%s替换“cai”
- iOS:UIView的CALayer基本演练
UIView的CALayer基本演练的属性和注意事项: 在UIView中创建一个按钮UIButton,然后设置UIButton的Layer属性 –圆角.边框.阴影及3D形变属性 注意: 1.在UIVi ...
- java中jar命令打包一个文件夹下的所有文件
(1)首先,必须保证java的所有路径都设置好,在dos提示符下输入jar -help出现C:\Documents and Settings\dly>jar -help非法选项:h用法:jar ...
- Nodejs全站开发学习系列 & 深入浅出Node学习笔记 & Spider抓取
https://course.tianmaying.com/node 这个系列的文章看起来很不错,值得学习一下. /Users/baidu/Documents/Data/Interview/Web-S ...
- python matplotlib.pyplot学习记录
matplotlib是python中很强大的绘图工具,在机器学习中经常用到 首先是导入 import matplotlib.pyplot as plt plt中有很多方法,记录下常用的方法 plt.p ...
- vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
- Nginx部署前端代码实现前后端分离
实现前后端分离,可以让前后端独立开发.独立部署.独立单测,双方通过JSON进行数据交互. 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境:对于后端开发人员来说 ,也不 ...
- 模拟源码深入理解Vue数据驱动原理(2)
我们说到如果监听的属性是个对象呢?那么这个对象中的其他属性岂不就是监听不了了吗?如下: 倘若user中的name.age属性变化,如何知道它们变化了呢?今儿,就来解决这一问题. 通过走读Vue源码,发 ...
- 【JavaScript】ReactJS基础
初探React,将我们的View标签化 前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的 ...