JSON+JSON5介绍

从景曜

2023-12-01

JSON使用介绍

1、简介

JSON，全称：javascriip对象表示法（JavaScript Object Notation），类似于XML，是轻量级的存储和交换文本信息的语法格式，并且JSON一段文本内容，JSON比XML存储更小、读写速度更快、更易解析，并且比XML更易于人阅读，JSON独立于语言，基本所有语言都支持JSON。

2、JSON语法规则

1、数据在名称/值对中
2、数据件用逗号分隔
3、使用斜杆\进行转义字符
4、大括号{}保存对象
5、中括号[]保存数组

JSON 名称/值对的结构

key:value

需要注意的是名称要用双引号包裹并且也只能是双引号。
例如：

"name":"jack"

JSON的可取值
可以是：
- 数字（整数或者浮点数）
- 字符串（在双引号中）
- 布尔值（true或false）
- 数组（在中括号中）
- 对象（在打括号中）
- null
JSON的两种结构：
1、对象：大括号 {} 保存的对象是一个无序的名称/值对集合
例如：

let jsonData = {
	"name":"jack",
	"age":12,
	"courge":["高等数学（上）","高等数学（下）","大学物理"],
	 "graduate":false
}

2、数组：中括号 [] 保存的数组是值（value）的有序集合

let jsonData = [
	{"name":"jack","age":21,"graduate":false},
	{"name":"rose","age":22,"graduate":false},
	...
]

3、JSON文件

JSON文件的类型为.json
JSON文本的MINE类型是application/json

4、访问\修改\删除数据

在javascript中，也可以定义和使用JSON格式数据，所以也可以通过JavaScript语法访问、更改JSON中的数据

4.1 操作对象数据

let jsonData = {"name":"jack","age":23,"graduate":false}

// 点访问
jsonData.name
// 修改
jsonData.name = "rose"
// 删除数据
delete jsonData.name

// 中括号访问
jsonData["name"]
// 修改
jsonData["namej"] = "rose"
// 删除数据
delete jsonData["name"]

（1）在使用for in遍历时，只能通过 jsonData[x] 来获取相应属性的值，而不能使用 jsonData.x
（2）并不是彻底删除元素，而是删除它的值，但仍会保留空间

4.2 操作数组数据

var sites = [ 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];

// 访问json中的数据
sites[0].name
// 修改
sites[0].name = "xxx"
// 删除
delete sites[0].name

5、常用的对象-JSON字符串互转的方法

首先得区分js对象，JSON对象和JOSN字符串，如下：

js对象

let jsObj = {name:"jack",age:21}

json对象

let jsonObj = {"name":"jack","age":23}

json字符串

let jsonObjStr = '{"name":"jack","age":23}'

可以看到json字符串是将整个json对象用引号包裹起来，包括最外层的括号

5.1 JOSN.stringify(value)方法

作用：将普通js对象转为json字符串

let jsonData = {
    name: "jack",
    age: 23,
    gender: "female",
    course: ["chinese", "english", "japanese"]
}

let changeToJsonStr = JSON.stringify(jsonData)
console.log(changeToJsonStr);

// { "name": "jack", "age": 23, "gender": "female", "course": ["chinese", "english", "japanese"] }

5.2 JSON.parse(value,[reciver])

作用：将json字符串转为普通js对象
参数reciver:一个转换结果的函数，对象的每个成员调用此函数

let jsonStr = '{ "name": "jack", "age": 23, "gender": "female", "course": ["chinese", "english", "japanese"] }'

let jsonObj = JSON.parse(jsonStr)

console.log(jsonObj);
// {
//     name: 'jack',
//     age: 23,
//     gender: 'female',
//     course: [ 'chinese', 'english', 'japanese' ]
// }

使用第二个参数

var text = '{ "name":"jack", "birthday":"2010-11-14", "address":"湖南"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "birthday") {
        return new Date(value);
    } else {
        return value;
}});

JSON5介绍

在开发Panda Api的最初版本，文档是用json来写的，但json语法不支持注释，不支持字符串换行，所有的key都必须双引号，末尾不能有多余的逗号…等等，一大堆极其严格的要求和不支持的功能。Json5是对JSON的扩展，放宽了原本json语法中一些不必要的语法规定，让人可以更容易手工编写和维护。

安装引用json5

安装

npm install json5

引用

// node.js中引用
const JSON5 = require('json5');

// vue 项目中引用
import JSON5 from 'json5'

改进的地方

下面我们简单看下json5相对于原来json语法上的区别
1、对象的 key 允许没有双引号
2、对象的 key 可以是任何 ES5.1 的标识符
3、对象和数组允许有多余的逗号结尾
4、字符串允许使用双引号、单引号包裹
5、字符串可以多行
6、字符串允许使用转义字符："Hello\nWorld\n!"
7、数字可以用十六进制表示：0xFF
8、数字允许使用小数点开头或结尾：.007，7.
9、数字前面可以有正号+或负号-
10、数字可以使用正无穷大Infinity、负无穷大-Infinity、和 NaN来表示
11、支持单行注释//和多行注释/* */
12、允许在任何在 json5 相关符号前后出现多余的空白符