JSON从入门到大师

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: JSON从入门到大师

前言

本文将解了json的一些基础知识,与深入了解json,本文是作者的一些理解与在网络上搜集的一些知识,并不全面,如有错误请在评论区指出。觉得本文对你有所帮助请三连支持博主,你的支持是我更新的动力,先赞后看养成习惯。

以下是本篇文章正文内容

一、初识json

1.1 JSON概念

JSON 全名JavaScript Object Notation是一种轻量级的数据交换格式,比XML更轻巧,易于阅读和编写,同时也易于机器解析和生成。它基于ECMA262语言规范(1999-12第三版)中JavaScript编程语言的一个子集。JSON采用与编程语言无关的文本格式,但是也使用了类C语言(包括C, C++, C#, Java, JavaScript, Perl, Python等)的习惯,这些特性使JSON成为理想的数据交换格式。

1.2 JavaScript内建对象

进入JSON前,先简单介绍一下JavaScript内建对象’Array对象第一段‘Array声明’的地方,声明一个Javascript Array对象,基本上是两种语法:

// 正式声明
  var team1 = new Array('Bruce', 'Sherry', 'Happy');
  // 整合声明
  var team2 = ['Bruce', 'Sherry', 'Happy'];
  alert(team1[0]); // Bruce
  alert(team2[2]); // Happy

一个比较正式,一个是比较简写,通常Javascript写久了,会采用第二种方式来声明Array。

再来看Javascript对象的声明,基本上也是两种:

// 正式声明
  var Bruce = new Object();
  Bruce.name = 'King Kong';
  Bruce.age = 18;
  Bruce.sex = 'male';
  alert(Bruce.age); // 18
  // 整合声明
  var Bruce = {
  'name' : 'King Kong',
  'age' : 18,
  'sex' : 'male'
  }
  alert(Bruce.name); // King Kong
  alert(Bruce[name]); // King Kong

一样,久了也是会选第二种来写,再来我们看看Javascript的‘Array + Object’的声明:

// 声明一个familys Array,里面包含两个Object
  var familys = [
  {'name' : 'Bruce',
  'age' : 18,
  'sex' : 'male'},
  {'name' : 'Sherry',
  'age' : 16,
  'sex' : 'famale'}
  ];
  alert(family[0].name); // Bruce
  alert(family[1].sex); // famale

到这里你已经会了JSON的80%了,JSON (JavaScript Object Notation)已经说明的很清楚了,它是一个JavaScript的子集,它利用Object与Array来表示数据,让数据很容易的可以交换使用。

JSON写法:

{
  'familys' = [
  {'name' : 'Bruce',
  'age' : 18,
  'sex' : 'male'},
  {'name' : 'Sherry',
  'age' : 16,
  'sex' : 'famale'}
  ]
  }

JSON Object: 以"{“开始,以”}“结尾 每个名称后跟着一个”:" 每对"名称:值"之间用","分隔

{ // 以"{"开始
  'name' : 'Bruce', // 每个名称后跟着一个":"
  'age' : 18, // 每对"名称:值"之间用","分隔
  'sex' : 'male'
  } // 以"}"结尾

JSON Array: 以"[“开始,以”]“结尾  值之间使用”,"

{
  // familys为一维数组,数组里包含两笔对象数据
  'familys' = [ // 以"["开始
  
  {'name' : 'Bruce',
 
  'age' : 18,
 
  'sex' : 'male'}, // 值之间使用","
  
  {'name' : 'Sherry',
 
  'age' : 16,
  
  'sex' : 'famale'}
 
  ] // 以"]"结尾
  
  }

JSON Value:

值本身可以是String、Number、true、false、null、Object、Array;

JSON String:

由双引号包围的任意Unicode字符集合。可以使用"反斜线()"来转义

二、JSON的使用

那JSON要如何使用呢?

原生的JSON格式数据,目前在IE7以上及MF 3以上,已经内建解析JSON格式的能力,但在兼容性及网络上的不确定性(其他浏览器),建议在有需要使用JSON格式的页面引用json2.js,依官方说法,请不要在使用json.js这个版本的Script了。

有以下代码:

var jsonData = "{'familys'=[{'name' : 'Bruce', 'age' : 18, 'sex' : 
'male'},
  
  {'name' : 'Sherry','age' : 16, 'sex' : 'famale'}]}"

方法一:使用eval()

这个方法会引发安全性问题,我就不介绍了。

方法二:使用json2.js (IE7以上及MF 3以上可以不引用)

先在网页中引用json2.js,然后使用json2所提供的parse方法:

var jsonData = "{'familys'=[{'name' : 'Bruce', 'age' : 18, 'sex' : 
'male'},
  
  {'name' : 'Sherry','age' : 16, 'sex' : 'famale'}]}"
 
  var jsonObj = JSON.parse(jsonData); // 将JSON格式数据转为对象
  
  alert(jsonObj.familys[0].name); // Bruce
  
  alert(jsonObj.familys[1].age); // 16

这样之后,我们就能在Ajax函数将服务器传回的JSON格式做解析:

// ...
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  var jsonObj = JSON.parse(xmlHttp.responseText);
  // ...
  }

使用了JSON来交换数据后,你会发现相关Ajax的源程序变简单了,例如:

// 原始Ajax函数
  function Do(xmlHttp) {
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  var familys = xmlHttp.responseXML.getElementsByTagName('familys');
  for (var i = 0; i < familys.length; i++) {
  var name = 
familys.getElementsByTagName('name')[0].firstChild.nodeValue;
  var age = familys.getElementsByTagName('age')[0].firstChild.nodeValue;
  var sex = familys.getElementsByTagName('sex')[0].firstChild.nodeValue;
  }
  }
  }
  // 使用JSON后的Ajax函数
  function Do(xmlHttp) {
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  var jsonObj = JSON.parse(xmlHttp.responseText);
  var name = jsonObj.familys[0].name;
  var age = jsonObj.familys[0].age;
  var sex = jsonObj.familys[0].sex;
  }

不只有变简单,而且程序的撰写更直觉。另外,你也可以把Object转为JSON:

// 声明一个familys Array,里面包含两个Object
  var familys = [
  {'name' : 'Bruce',
  'age' : 18,
  'sex' : 'male'},
  {'name' : 'Sherry',
  'age' : 16,
  'sex' : 'famale'}
  ];
  var jsonData = JSON.stringify(familys);

三、深入了解JSON

3.1 JSON和JS对象

很多时候都听到“JSON是JS的一个子集”这句话,而且这句话我曾经也一直这么认为,每个符合JSON格式的字符串你解析成js都是可以的,直到后来发现了一个奇奇怪怪的东西。

1.两个本质不同的东西为什么那么密切

JSON和JS对象本质上完全不是同一个东西,就像“斑马线”和“斑马”,“斑马线”基于“斑马”身上的条纹来呈现和命名,但是斑马是活的,斑马线是非生物。

同样,”JSON”全名”JavaScript Object Notation”,所以它的格式(语法)是基于JS的,但它就是一种格式,而JS对象是一个实例,是存在于内存的一个东西。

说句玩笑话,如果JSON是基于PHP的,可能就叫PON了,形式可能就是这样的了[‘propertyOne’ => ‘foo’, ‘propertyTwo’ => 42,],如果这样,那么JSON可能现在是和PHP比较密切了。

此外,JSON是可以传输的,因为它是文本格式,但是JS对象是没办法传输的,在语法上,JSON也会更加严格,但是JS对象就很松了

那么两个不同的东西为什么那么密切,因为JSON毕竟是从JS中演变出来的,语法相近。

2 JSON格式别JS对象语法表现上严格在哪

可以看到,相对于JS对象,JSON的格式更严格,所以大部分写的JS对象是不符合JSON的格式的。

另外,除了常见的“正常的”JSON格式,要么表现为一个对象形式{…},要么表现为一个数组形式[…],任何单独的一个10进制数值、双引号字符串、布尔值和null都是有效符合JSON格式的

3.一个有意思的地方,JSON不是JS的子集

将以下代码copy到控制台执行

var code = '"\u2028\u2029"';  
JSON.parse(code); // works fine  
eval(code); // fails 

这两个字符\u2028和\u2029分别表示行分隔符和段落分隔符,JSON.parse可以正常解析,但是当做js解析时会报错。

3.2 JS中的JSON函数

在JS中我们主要会接触到两个和JSON相关的函数,分别用于JSON字符串和JS数据结构之间的转化,一个叫JSON.stringify,它很聪明,聪明到你写的不符合JSON格式的JS对象都能帮你处理成符合JSON格式的字符串,所以你得知道它到底干了什么,免得它只是自作聪明,然后让你Debug long time;

另一个叫JSON.parse,用于转化json字符串到JS数据结构,它很严格,你的JSON字符串如果构造地不对,是没办法解析的。

而它们的参数不止一个,虽然我们经常用的时候只传入一个参数。此外,还有一个toJSON函数,我们较少看到,但是它会影响JSON.stringify。

目录
相关文章
|
6月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
158 1
|
6月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
335 0
|
3月前
|
JSON 数据格式
langchain 入门指南 - JSON 形式输出大模型的响应
langchain 入门指南 - JSON 形式输出大模型的响应
136 0
|
6月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
58 1
|
11月前
|
数据采集 JSON JavaScript
C# 解析“JSON“格式数据和网络实战案例 入门
C# 解析“JSON“格式数据和网络实战案例 入门
|
JSON 数据格式
02zTree - 最简单的入门例子(JSON 数据)
02zTree - 最简单的入门例子(JSON 数据)
82 0
|
存储 JSON 数据格式
Python快速上手系列--JSON--入门篇
Python快速上手系列--JSON--入门篇
83 0
|
JSON Java 关系型数据库
springboot基础入门之json转换框架 、全局异常捕捉以及JPA连接数据库
springboot基础入门之json转换框架 、全局异常捕捉以及JPA连接数据库
|
XML JSON JavaScript
简单易懂的JSON入门
本节重点来介绍一下JSON,JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法。也就是说,JSON是一种格式。首先搞清楚三个概念,即什么是JSON字符串,什么是JavaScript对象,还有什么又叫做JSON对象?先来说一个事,在没有JSON之前,前台页面和Java等语言充当的服务器层,到底是如何传输数据的呢?没错,是通过XML来传输的。比如一个登陆页面。
174 0
|
JavaScript 前端开发
TypeScript:实践入门和tsconfig.json配置文件
TypeScript:实践入门和tsconfig.json配置文件
104 0
下一篇
无影云桌面