轻量级数据格式 —— JSON

Posted 2022-01-16 CS@zeny

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轻量级数据格式 —— JSON相关的知识，希望对你有一定的参考价值。

JSON

文章目录

JSON

前言 : javascript 对象简谱（JSON，JavaScript Object Notation）标准，JSON 是 JavaScript 的严格子集，利用 JavaScript 中的几种模式来表示结构化数据。理解 JSON 最关键的一点是要把它当成一种数据格式，而不是编程语言。JSON 不属于 JavaScript，它们只是拥有相同的语法而已。JSON也不是只能在 JavaScript 中使用，它是一种通用数据格式。很多语言都有解析和序列化 JSON 的内置能力。

JSON 语法

支持三种类型

简单值 : 字符串、数值、布尔值和 null 可以在 JSON 中出现，就像在 JavaScript 中一样。特殊值 undefined 不可以
对象 : 第一种复杂数据类型，对象表示有序键/值对。每个值可以是简单值，也可以是复杂类型。
数组 : 第二种复杂数据类型，数组表示可以通过数值索引访问的值的有序列表。数组的值可以是任意类型，包括简单值、对象，甚至其他数组。

注意 : JSON 没有变量、函数或对象实例的概念。JSON 的所有记号都只为表示结构化数据，虽然它借用了JavaScript 的语法，但是千万不要把它跟JavaScript 语言混淆。

简单值

最简单的 JSON 可以是一个数值。
- 举个栗子 :
  - 5
  - "hello"
- 布尔值和 null 本身也是有效的 JSON 值。

注意 : JavaScript 字符串与 JSON 字符串的主要区别是，JSON 字符串必须使用双引号（单引号会导致语法错误）。

对象

对象使用与 JavaScript 对象字面量略为不同的方式表示。
- 以下是 JavaScript 中的对象字面量：
- ```
let object = 
    "name" : "Nicholas",
    "age" :29
;
```
- 而 JSON 的表示对象语法是
- ```
	"name": "Nicholas",
	"age": 29
```
与 JavaScript 对象字面量相比，JSON 主要有两处不同。首先，没有变量声明（JSON 中没有变量）。其次，最后没有分号（不需要，因为不是 JavaScript 语句）。同样，用引号将属性名包围起来才是有效的 JSON 。
JavaScript和JSON的属性的值都可以是简单值或复杂数据类型值，而JSON可以在对象中再嵌入对象。
- 比如：JSON数据
- ```
	"name": "Nicholas",
	"age": 29,
	"school": 
		"name": "Merrimack College",
		"location": "North Andover, MA"
	
```
- 上述例子中即使整个 JSON 对象中有两个属性都叫 “name” ，但它们属于两个不同的对象，一个是外面对象的"name"属性,另个是里面 “school” 对象的 “name” 属性，因此是允许的。同一个对象中不允许出现两个相同的属性。
与 JavaScript 不同，JSON 中的对象属性名必须始终带双引号。手动编写 JSON 时漏掉这些双引号或使用单引号是常见错误。

数组

JSON 的第二种复杂数据类型是数组。
数组在 JSON 中使用 JavaScript 的数组字面量形式表示。
- 例如，以下是一个 JavaScript 数组：
- ```
let values = [5,"哈喽",false];
```
在 JSON 中可以使用类似语法表示相同的数组：
- ```
[25, "hi", true]
```

同样，JSON没有变量，也没有分号。数组和对象可以组合使用，以表示更加复杂的数据结构

[
	
		"title": "Professional JavaScript",
		"authors": [
			"Nicholas C. Zakas",
			"Matt Frisbie"
		],
		"edition": 4,
		"year": 2017
	,
	
		"title": "Professional JavaScript",
		"authors": [
			"Nicholas C. Zakas"
		],
		"edition": 3,
		"year": 2011
	,
	
		"title": "Professional JavaScript",
		"authors": [
			"Nicholas C. Zakas"
		],
		"edition": 2,
		"year": 2009
	,
	
		"title": "Professional Ajax",
		"authors": [
			"Nicholas C. Zakas",
			"Jeremy McPeak",
			"Joe Fawcett"
		],
		"edition": 2,
		"year": 2008
	,
	
		"title": "Professional Ajax",
		"authors": [
			"Nicholas C. Zakas",
			"Jeremy McPeak",
			"Joe Fawcett"
		],
		"edition": 1,
		"year": 2007
	,
	
		"title": "Professional JavaScript",
		"authors": [
			"Nicholas C. Zakas"
		],
    	"edition": 1,
		"year": 2006
	
]

对象和数组通常会作为 JSON 数组的顶级结构，以便创建大型复杂数据结构。

解析和序列化

JSON 的迅速流行并不仅仅因为其语法与 JavaScript 类似，很大程度上还因为 JSON 可以直接被解析成可用的 JavaScript 对象。与解析为 DOM 文档的 XML 相比，这个优势非常明显。为此，JavaScript 开发者可以非常方便地使用 JSON 数据。

比如 : JSON数据中books数组
[
	
		"title": "Professional JavaScript",
		"authors": [
			"Nicholas C. Zakas",
			"Matt Frisbie"
		],
		"edition": 4,
		"year": 2017
	,
	
		"title": "Professional JavaScript",
		"authors": [
			"Nicholas C. Zakas"
		],
		"edition": 3,
		"year": 2011
	,
	
		"title": "Professional JavaScript",
		"authors": [
			"Nicholas C. Zakas"
		],
		"edition": 2,
		"year": 2009
	
]
获取第二本书的书名 : books[1].title

JSON 对象

早期的 JSON 解析器基本上就相当于 JavaScript 的 eval() 函数。因为 JSON 是 JavaScript 语法的子集，所以 eval() 可以解析、解释，并将其作为JavaScript 对象和数组返回。

JSON 对象在JavaScript中有两个方法 :
- stringify() ：将JavaScript 序列化为 JSON 字符串
- parse() ：将 JSON 解析为原生 JavaScript 值

举个栗子 :

let book = 
	title: "Professional JavaScript",
	authors: [
		"Nicholas C. Zakas",
		"Matt Frisbie"
	],
	edition: 4,
	year: 2017
; //JavaScript的对象

let jsonText = JSON.stringify(book); //将JavaScript对象序列化为JSON

这个例子使用 JSON.stringify() 把一个 JavaScript 对象序列化为一个 JSON 字符串，保存在变量 jsonText 中。
默认情况下， JSON.stringify() 会输出不包含空格或缩进的 JSON 字符串

变量 jsonText 的内容 :

"title":"Professional JavaScript","authors":["Nicholas C. Zakas","Matt Frisbie"],"edition":4,"year":2017

在序列化 JavaScript 对象时，所有函数和原型成员都会有意地在结果中省略。此外，值为 undefined 的任何属性也会被跳过。最终得到的就是所有实例属性均为有效 JSON 数据类型的表示。
JSON 字符串可以直接传给 JSON.parse()，然后得到相应的 JavaScript 值。
- 比如，可以使用以下代码创建与 book 对象类似的新对象：
- ```
let bookCopy = JSON.parse(jsonText); //将JSON解析为JavaScript的对象
```
- 注意， book 和 bookCopy 是两个完全不同的对象，没有任何关系。但是它们拥有相同的属性和值。
- JSON.parse() 传入的JSON字符串必须是有效的，如果传入的 JSON 字符串无效，则会导致抛出错误。

序列化选项

JavaScript 中 JSON.stringify() 方法除了要序列化的对象，还可以接收两个参数。
这两个参数可以用于指定其他序列化 JavaScript 对象的方式。
- 第一个参数是过滤器，可以是数组或函数；第二个参数是用于缩进结果 JSON 字符串的选项。
- 单独或组合使用这些参数可以更好地控制 JSON 序列化。

过滤结果

如果第二个参数是一个数组，那么 JSON.stringify() 返回的结果只会包含该数组中列出的对象属性。

比如下面的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript序列化</title>
</head>

<body>
    <script>
        let book = 
            title: "富婆通讯录",
            authors: [
                "CS@zeny",
                "各大富婆"
            ],
            edition: 1,
            year: 2021
        ;
        let jsonText1 = JSON.stringify(book, ["title", "edition"]); //将属性"title"和"edition"序列化
        let jsonText2 = JSON.stringify(book, ["title", "edition", "authors"]); //将属性"title","edition"和"authors"序列化
        document.write("jsonText1 : " + jsonText1); //输出jsonText1的内容
        document.write("<br>"); //换行
        document.write("jsonText2 : " + jsonText2); //输出jsonText2的内容
    </script>

</body>

</html>

得到的结果为

jsonText1 : "title":"富婆通讯录","edition":1
jsonText2 : "title":"富婆通讯录","edition":1,"authors":["CS@zeny","各大富婆"]

如果第二个参数是一个函数，则行为又有不同。

提供的函数接收两个参数：属性名（ key ）和属性值（ value ）。可以根据这个 key 决定要对相应属性执行什么操作。这个 key 始终是字符串，只是在值不属于某个键/值对时会是空字符串。
为了改变对象的序列化，返回的值就是相应 key 应该包含的结果。注意，返回 undefined 会导致属性被忽略。
下面看一个例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript序列化</title>
</head>

<body>
    <script>
        let book = 
            title: "富婆通讯录",
            authors: [
                "CS@zeny",
                "各大富婆"
            ],
            edition: 1,
            year: 2021,
            price:"100yuan" 
        ;
      
        let jsonText = JSON.stringify(book, (key, value) => 
            switch (key) 
                case "authors": //如果键是"authors"
                    return value.join(",") //则将数组转换成字符串
                case "year": //如果键是"year"
                    return 5000; //则将value值置为5000
                case "edition": //如果键是"edition"
                    return undefined; //则将返回 undefined, 返回未定义则会忽略该属性,即忽略"edition"属性
                default:
                    return value; //最后一定要提供默认返回值,以便返回其他属性传入的值
             //函数基于键进行过滤
        ); //第一次调用这个函数实际上会传入空字符串 key，值是 book 对象,这也解释了为啥最后默认返回值一定得是vaule,如果是其他则传不进book对象.

        document.write(jsonText); //输出jsonText的内容
    </script>

</body>

</html>

输出结果 :

"title":"富婆通讯录","authors":"CS@zeny,各大富婆","year":5000,"price":"100yuan"

注意，函数过滤器会应用到要序列化的对象所包含的所有对象，因此如果数组中包含多个具有这些属性的对象，则序列化之后每个对象都只会剩下上面这些属性。

字符串缩进

JSON.stringify()方法的第三个参数控制缩进和空格。在这个参数是数值时，表示每一级缩进的空格数。

说明 : 如果第二个参数不需要填的话,就必须要用关键字null来代替

比如 : let jsonText1 = JSON.stringify(book, null, 2);
举个大栗子 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript序列化</title>
</head>

<body>
    <script>
        let book = 
            title: "富婆通讯录",
            authors: [
                "CS@zeny",
                "各大富婆"
            ],
            edition: 1,
            year: 2021,
            price: "100yuan"
        ;

        let jsonText1 = JSON.stringify(book, null, 2); //每级缩进2个空格
        let jsonText2 = JSON.stringify(book, null, 4); //每级缩进4个空格
        console.log(jsonText1); //在控制台输出
        console.log(jsonText2); //在控制台输出
        //说明: 如果使用document.write(); 函数在网页上输出会看不到空格,因为在网页上HTML语法直接忽略空格, 所以要用console.log()函数在控制台输出
    </script>

</body>

</html>

输出效果 :

注意，除了缩进， JSON.stringify() 方法还为方便阅读插入了换行符。这个行为对于所有有效的缩进参数都会发生。（只缩进不换行也没什么用。）最大缩进值为 10，大于 10 的值会自动设置为 10。

如果缩进参数是一个字符串而非数值，那么JSON字符串中就会使用这个字符串而不是空格来缩进。使用字符串，也可以将缩进字符设置为 Tab或任意字符。

如两个连字符--, 一个Tab

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript序列化</title>
</head>

<body>
    <script>
        let book = 
            title: "富婆通讯录",
            authors: [
                "CS@zeny",
                "各大富婆"
            ],
            edition: 1,
            year: 2021,
            price: "100yuan"
        ;
        
        let jsonText1 = JSON.stringify(book, null, "--"); //每级缩进字符串--
        let jsonText2 = JSON.stringify(book, null, "    "); //每级用Tab缩进, 注意引号内不是空格输入而是按一次Tab键输入
        let jsonText3 = JSON.stringify(book, null, 4); //每级缩进4个空格
        console.log(jsonText1); //在控制台输出
        console.log(jsonText2); //在控制台输出
        console.log(jsonText3); //在控制台输出
        //说明: 如果使用document.write(); 函数在网页上输出会看不到空格,因为在网页上HTML语法直接忽略了, 所以要用console.log()函数在控制台输出
    </script>

</body>

</html>

效果 :

注意 : 使用字符串时同样有 10 个字符的长度限制。如果字符串长度超过 10，则会在第 10 个字符处截断。

toJSON()方法

当对象需要在 JSON.stringify() 之上自定义 JSON 序列化。此时，可以在要序列化的对象中添加 toJSON()方法，序列化时会基于这个方法返回适当的 JSON 表示。
事实上，原生 Date 对象就有一个 toJSON() 方法，能够自动将 JavaScript 的 Date 对象转换为 ISO 8601 日期字符串（本质上与在Date 对象上调用 toJSON() 方法一样）。
举个栗子 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript序列化</title>
</head>

<body>
    <script>
        let book = 
            title: "富婆通讯录",
            authors: [
                "CS@zeny",
                "各大富婆"
            ],
            edition: 1,
            year: 2021,
            price: "100yuan",
            toJSON: function() 
                    return this.title;
                 //这里 book 对象中定义的 toJSON() 方法简单地返回了图书的书名（ this.title ）。
        ;
       
        let jsonText = JSON.stringify(book);
        console.log(jsonText); //在控制台输出
    </script>

</body>

</html>

输出结果 : "富婆通讯录"
toJSON()方法可以返回任意序列化值，都可以起到相应的作用。如果对象被嵌入在另一个对象中，返回 undefined 会导致值变成 null ；或者如果是顶级对象，则本身就是 undefined 。

注意，箭头函数不能用来定义 toJSON() 方法。主要原因是箭头函数的词法作用域是全局作用域，在这种情况下不合适。

toJSON() 方法可以与过滤函数一起使用，因此理解不同序列化流程的顺序非常重要。在把对象传给 JSON.stringify() 时会执行如下步骤。
1. 如果可以获取实际的值，则调用 toJSON() 方法获取实际的值，否则使用默认的序列化。
2. 如果提供了第二个参数，则应用过滤。传入过滤函数的值就是第 1 步返回的值。
3. 第 2 步返回的每个值都会相应地进行序列化。
4. 如果提供了第三个参数，则相应地进行缩进。理解这个顺序有助于决定是创建 toJSON() 方法，还是使用过滤函数，或是两者都用。

解析选项

JSON.parse() 方法也可以接收一个额外的参数，这个函数会针对每个键/值对都调用一次。
为区别于传给 JSON.stringify() 的起过滤作用的替代函数（replacer），这个函数被称为还原函数（reviver）。
- 实际上它们的格式完全一样，即还原函数也接收两个参数，属性名（ key ）和属性值（ value ），另外也需要返回值。
如果还原函数返回 undefined ，则结果中就会删除相应的键。如果返回了其他任何值，则该值就会成为相应键的值插入到结果中。还原函数经常被用于把日期字符串转换为 Date 对象。

举个栗子 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON解析</title>
</head>

<body>
    <script>
        let book = 
            title: "富婆通讯录",
            authors: [
                "CS@zeny",
                "各大富婆"
            ],
            edition: 1,
            year: 2021,
            price: "100yuan",
            releaseDate: new Date(2021, 01, 01) //增加了releaseDate属性，是一个Date对象。
        ;
        
        let jsonText = JSON.stringify(book); //这个对象在被序列化为JSON字符串后
        let bookCopy = JSONjson格式
 JSONAJAXJSONPXML
 XMLJSON
 java后台对json格式数据的解析
 JSON
 json