文档章节

JSON学习笔记

前端老手
 前端老手
发布于 10/10 23:54
字数 1296
阅读 26
收藏 0

JSON学习笔记

目录

简述

  JSON(JavaScript Object Notation)是一种可以被很多语言使用的数据格式,本质上是一个字符串,但是它有自己的语法,这样它就可以被 解析器 转换为编程语言中的元素——简单值、对象、数组。 反过来,编程语言中的元素也可以被 序列化器 转换为 JSON 字符串。

  很多编程语言都有针对 JSON 的解析器和序列化器,比如后台 PHP 把一个 PHP 对象 序列化 为一段 JSON 字符串,传递给前台页面的 JavaScript 脚本,然后 JavaScript 将其 解析 为一个 JavaScript 对象。

  下文将解答两个问题:

  1. 语法:JSON可以表示哪些数据?

  2. 解析与序列化:JSON字符串与 JavaScript 数据如何互相转换?

 

一、语法

JSON作为数据桥梁,可以表示简单值、对象、数组。

 

1.1 简单值

  • 字符串:"hello world"

  • 数值:10086

  • 布尔值:true

  • null:null

 

1.2 对象

  JSON 要求给对象属性加上双引号,而且 JSON对象没有名字,末尾没有分号,因为这不是JavaScript语句:

//这是一个JSON对象
{
    "name": "Paykan",
    "age": 27
}

 

1.3 数组

  JSON数组和JavaScript数组一样: [25, "Paykan"],但是没有名字。可以把JSON数组和JSON对象组合起来:

//这是一个JSON数组
[
    {
        "name": "Paykan",
        "age": 27,
        "skill": ["HTML", "CSS", "JavaScript"]
    },
    {
        "name": "BarneyRoos",
        "age": 26,
        "skill": ["JSON", "Ajax", "Vue"]
    }
]

 

二、解析与序列化

正因为可以把 JSON 字符串解析为有用的 JavaScript 对象、数组等,所以 JSON 已经是 Web 开发中数据交换的事实标准。

JavaScript 简单值和数组是不需要序列化的。JSON 简单值和数组也不需要解析即可在 JavaScript 中使用。

 

2.1 JSON对象

JavaScript 中有个 JSON 对象,专门用来处理 JSON 数据。JSON 对象有两个方法:
  • 序列化器:stringify(),用于把 JavaScript 值转换为 JSON 字符串

  • 解析器:parse(),用于把 JSON 字符串解析为 JavaScript 值

//序列化器的使用
//先定义一个JavaScript对象
var book = {
    title: "Professional JavaScript",
    authors: ["Nicholas"],
    edition: 3,
    year: 2011
    say: function(){
        return this.title;
    }
}
​
//开始序列化
var jsonText = JSON.stringify(book); 
//"{"title":"Professional JavaScript","authors":["Nicholas"],"edition":3,"year":2011}"
//注意,内层的双引号肯定是经过转义了的
//开始解析
var newBook = JSON.parse(jsonText); 
//{title: "Professional JavaScript", authors: Array(1), edition: 3, year: 2011}

  在序列化 JavaScript 对象的时候,函数和原型对象成员会被忽略,值为 undefined 的属性也会被忽略。

 

2.2 序列化选项

stringify() 函数可以接收另外两个参数来控制序列化工作:过滤器、缩进选项

 

2.2.1 过滤器

  过滤器用来指定工作方式,你可以让 stringify() 函数只转换特定的几个属性、可以规定遇见某个属性的时候做点什么事情,所以过滤器有两种:

  1. 数组:用来让 stringify() 函数只转换特定的几个属性

//只转换上文中 book 对象的title和edition属性
var jsonText = JSON.stringify(book, ["title", "edition"]);
//"{"title":"Professional JavaScript","edition":3}"
  1. 函数:用来规定遇见某个属性的时候做点什么事情

//当遇见title属性时,加上字符串 "3rd edition"
//当遇见edition属性时,转换为undefined————不出现在JSON字符串中
var jsonText = JSON.stringify(book, function(key, value){
    switch(key){
        case "title": return value + "3rd edition"; 
        case "edition": return undefined;
        default: return value;//注意:不需要处理的属性,一定要显式地返回其值
    }
});
//"{"title":"Professional JavaScript3rd edition","authors":["Nicholas"],"year":2011}"

 

2.2.2 缩进选项

  在序列化 JavaScript 对象时,还可以保留源代码中的换行和缩进——只需要用一个整数指定缩进几个空格即可:

//第二个参数如果不需要设置,就必须为null
var jsonText = JSON.stringify(book, null, 4);
/*
    "{
        "title": "Professional JavaScript",
        "authors": [
            "Nicholas"
        ],
        "edition": 3,
        "year": 2011
    }"
*/

 

2.3 解析选项

  和序列化选项一样,在进行 JSON 对象解析时,也可以加上另外的参数来控制函数的工作。parse() 函数接收的第二个参数是一个函数,将在每个属性上调用:

//现在把上文的jsonText解析成JavaScript对象,解析过程中加一点控制
var newBook = JSON.parse(jsonText, function(key, value){
    if(key === "edition") {
        return value + "rd";
    }
    else{
        return value;   //注意:不需要处理的属性,一定要显式地返回其值,需要删除的属性,返回undefined
    }
});

 

小结

  JSON可以表示三种类型的数据:

  • 简单值:不能表示 undefined,不需要序列化和解析

  • 数组:和 JavaScript 数组一样,不需要序列化和解析

  • 对象:属性名需要加双括号

   JavaScript 对象序列化时可以用过滤器和缩进选项来控制序列化工作。

  解析 JSON 对象时可以用解析函数来控制解析工作。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=hh1kihhci2cb

前端老手
粉丝 10
博文 618
码字总数 0
作品 0
卢湾
技术主管
私信 提问
Golang学习笔记目录

Golang 介绍 Go语言是谷歌2009发布的第二款开源编程语言。 Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全、支持并行进程。...

ChainZhang
2017/12/26
0
0
Golang 学习笔记(09)—— json和xml解析

本文为转载,原文:Golang 学习笔记(09)—— json和xml解析 Golang xml package 函数 Marshal Marshal函数返回v的XML编码。 Marshal处理数组或者切片时会序列化每一个元素。Marshal处理指针...

ChainZhang
2018/01/03
0
0
PHP再学习5——RESTFul框架 远程控制LED

0.前言 去年(2013年)2月第一次接触yeelink平台,当时该平台已经运行了一些时间也吸引了不少极客。试想自己也将投身IoT(物联网)行业,就花了些时间研究了它。陆陆续续使用和研究了一年,大...

thinkyoung
2014/12/02
0
0
Golang 学习笔记(10)—— mysql操作

本文为转载,原文:Golang 学习笔记(10)—— mysql操作 Golang go-sql-driver/mysql go操作mysql的驱动包很多,这里讲解当下比较流行的go-sql-driver/mysql 安装 执行下面两个命令: 安装完...

ChainZhang
2018/01/04
0
0
Web开发系列 - ExtJS

什么是EXT 1、ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用JavaScript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、P...

长征2号
2017/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

elasticsearch 6.x的基本dsl语句

本文使用的谷歌浏览器插件sense,链接如下sense插件(兼容es6.x版本) 查看集群状态 http://106.12.27.130:9200/_cat/health?v 绿色-一切都很好(集群功能齐全) 黄色——所有的数据都是可用...

长恭
7分钟前
0
0
Math对象的一些方法

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //圆周率 console.log(Math.PI) ......

zhengzhixiang
13分钟前
2
0
移动端的弹窗滚动禁止body滚动

本文转载于:专业的前端网站➼移动端的弹窗滚动禁止body滚动 前言 最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到body滚动,而阻止默认行为是不行的,这样两个...

前端老手
36分钟前
9
0
设计模式 建造者模式和模板方法模式扩展篇

建造者模式和模板方法模式扩展篇 UML 与抽象工厂模式比较 本模式可以看出与抽象工厂非常类似,都是产生不同的产品,怎么区分这两种设计的使用场景呢 - 建造者模式关注的是基本方法的调...

木本本
41分钟前
11
0
CPU 读取cache、内存、磁盘性能

google 工程师Jeff Dean 首先在他关于分布式系统的ppt文档列出来的,到处被引用的很多。 1秒=10^3毫秒=10^6微妙=10^9纳秒=10^12皮秒 读 cache ns 级,读内存100 ns,从内存顺序读1MB 0.25ms,...

SibylY
48分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部