解锁JSON的奇妙世界：从基础到高级应用，一文搞懂JSON的妙用（上）

分类：Json作者：技术蜜糖罐

JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，不仅易于人阅读和编写，还易于机器解析和生成。本文深入探讨了JSON的基本特点，从简单的数据格式到支持的数据类型，再到嵌套结构、处理日期、数组和特殊值等高级用法。通过实例演示，展示了JSON在前后端数据交换中的常见应用，以及在处理复杂数据结构、日期、数组等方面的技巧。此外，还介绍了一些高级应用，如使用JSON Web Token (JWT)进行身份验证，处理JSONP跨域请求，使用JSONPath查询节点，以及利用JSON Server快速搭建虚拟API。通过深入理解这些应用，开发者可以更灵活地运用JSON，提高开发效率。

它基于键值对的方式组织数据，具有以下几个特点：

JSON的特点

  1. 数据格式简单： JSON 数据只包含键值对，键和值之间使用冒号分隔，键值对之间使用逗号分隔。数据由对象和数组组成。

    {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false,
  "grades": [85, 92, 78]
}

  2. 数据类型： JSON 支持字符串、数字、布尔值、数组、对象、null 这几种数据类型。

    • 字符串：使用双引号包裹的 Unicode 字符串。
    • 数字：整数或浮点数。
    • 布尔值：true 或 false。
    • 数组：有序的值列表，使用方括号包裹。
    • 对象：无序的键值对集合，使用花括号包裹。
    • null：表示空值。

  3. 易于嵌套： 可以嵌套使用对象和数组，形成复杂的数据结构。

    {
  "person": {
    "name": "Alice",
    "age": 25,
    "address": {
      "city": "London",
      "postalCode": "SW1A 1AA"
    }
  },
  "hobbies": ["reading", "traveling"]
}

  4. 键值对的无序性： JSON 对象中的键值对没有固定的顺序，但大多数 JSON 解析器会保持读取时的顺序。

  5. 可读性和可扩展性： JSON 数据是纯文本，易于人类阅读和编写。它还支持嵌套结构，可以轻松地扩展为更复杂的数据模型。

JSON 通常用于在前后端之间进行数据交换，也经常用于配置文件和日志文件等场景。在 JavaScript 中，可以使用 JSON.parse() 方法将 JSON 字符串解析为 JavaScript 对象，而 JSON.stringify() 方法则用于将 JavaScript 对象序列化为 JSON 字符串。

总体而言，JSON 是一种通用的数据交换格式，由于其简单性和可读性，成为许多应用程序和服务之间常用的数据格式。

当使用 JSON 时，最常见的情况之一是在前端和后端之间进行数据交换。以下是一个简单的 JSON 使用实例，其中包括将 JavaScript 对象转换为 JSON 字符串以及将 JSON 字符串解析为 JavaScript 对象的过程：

JSON 转字符串

假设有一个 JavaScript 对象表示用户信息：

const user = {
  "id": 123,
  "username": "john_doe",
  "email": "john@example.com",
  "isPremiumUser": true,
  "roles": ["user", "admin"]
};

要将该对象转换为 JSON 字符串，可以使用 JSON.stringify() 方法：

const jsonString = JSON.stringify(user);
console.log(jsonString);

上述代码会输出如下 JSON 字符串：

{
  "id": 123, "admin"]
}

字符串解析为 JSON

反过来，如果有一个 JSON 字符串，可以使用 JSON.parse() 方法将其解析为 JavaScript 对象：

const jsonString = '{"id":123,"username":"john_doe","email":"john@example.com","isPremiumUser":true,"roles":["user","admin"]}';
const parsedUser = JSON.parse(jsonString);
console.log(parsedUser);

上述代码会输出如下 JavaScript 对象：

{
  id: 123,
  username: 'john_doe',
  email: 'john@example.com',
  isPremiumUser: true,
  roles: ['user', 'admin']
}

这两个过程是在前后端交互中非常常见的步骤。前端通常会将用户输入的数据转换为 JSON 字符串，然后通过网络传递给后端。后端接收到 JSON 字符串后，使用 JSON.parse() 转换为对象，进行进一步的处理和存储。

这只是 JSON 在实际应用中的一个简单示例，实际场景可能涉及更复杂的数据结构和交互。

当使用 JSON 时，除了基本的对象转换和解析，还可以考虑一些其他常见的用例。以下是一些 JSON 的高级用法和实例：

1. 处理嵌套结构

JSON 支持嵌套结构，例如一个用户对象中包含地址信息：

const userWithAddress = {
  "id": 123,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zipcode": "12345"
  }
};

2. 处理日期

在 JSON 中，日期通常以字符串的形式表示。例如，一个包含日期的事件对象：

const event = {
  "name": "Birthday Party",
  "date": "2024-02-01T18:30:00.000Z"
};

3. 处理数组

JSON 中的数组允许存储多个相似类型的元素：

const shoppingList = {
  "items": [
    {"name": "Milk", "quantity": 2},
    {"name": "Bread", "quantity": 1},
    {"name": "Eggs", "quantity": 12}
  ]
};

4. 处理特殊值

JSON 支持常见的特殊值，如 null：

const data = {
  "value": null
};

5. 处理 JSON Schema

JSON Schema 是一种描述 JSON 数据结构的标准。以下是一个简单的 JSON Schema 示例：

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "age": {
      "type": "integer"
    },
    "email": {
      "type": "string",
      "format": "email"
    }
  },
  "required": ["name"]
}

这个 JSON Schema 描述了一个包含姓名（必须）、年龄（整数类型）、电子邮件（符合电子邮件格式）的对象。

6. 使用 Fetch API 发送 JSON 数据

在前端，使用 Fetch API 可以方便地发送 JSON 数据。以下是一个使用 Fetch 发送 POST 请求的例子：

const user = {
  "username": "john_doe",
  "email": "john@example.com"
};

fetch('https://example.com/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

这是一些在实际应用中可能遇到的 JSON 使用实例。JSON 在数据交换和存储中被广泛使用，其简单性和易读性使其成为理想的数据格式之一。

当使用 JSON 时，还有一些其他用例和技巧，具体取决于具体的应用场景。以下是一些建议：

7. 使用 JSON Web Token (JWT)

JWT 是一种基于 JSON 的开放标准（RFC 7519），用于在各方之间安全地传输信息。它通常用于身份验证和信息交换。以下是一个简单的 JWT 示例：

const jwt = require('jsonwebtoken');

const secretKey = 'mySecretKey';

const payload = {
  userId: 123,
  username: 'john_doe'
};

const token = jwt.sign(payload, secretKey);

console.log('JWT:', token);

8. 处理 JSONP

JSONP 是一种通过动态创建 <script> 标签来加载跨域 JSON 数据的技术。以下是一个 JSONP 请求的简单例子：

function handleResponse(data) {
  console.log('JSONP Response:', data);
}

const script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=handleResponse';
document.head.appendChild(script);

9. 使用 JSONPath

JSONPath 是一种用于从 JSON 数据中选择或查询节点的语言。类似于 XPath 对 XML 的作用。以下是一个简单的 JSONPath 查询示例：

const jsonPath = require('jsonpath');

const data = {
  "store": {
    "book": [
      {"title": "Book 1", "price": 20},
      {"title": "Book 2", "price": 25}
    ],
    "location": "New York"
  }
};

const prices = jsonPath.query(data, '$.store.book[*].price');
console.log('Book Prices:', prices);

10. 使用 JSON Server

JSON Server 是一个轻量级的 RESTful API 服务器，可基于 JSON 文件快速搭建虚拟 API。以下是一个使用 JSON Server 的例子：

# 全局安装 JSON Server
npm install -g json-server

# 创建一个包含数据的 JSON 文件（db.json）
# 启动 JSON Server
json-server --watch db.json

这些是一些建议，覆盖了一些更高级的 JSON 使用情景和相关工具。JSON 在各种开发场景中都有着广泛的应用，因此深入了解它的各个方面可以为开发者提供更多的灵活性和效率。

原文地址：https://blog.csdn.net/wenbingy/article/details/135922954

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

优化cesium里的热力图
文章浏览阅读2.4k次。最近要优化cesium里的热力图效果，浏览了网络上的各种方法，发现大多是贴在影像上的。这么做好是好，但是会被自生添加的模型或者其他数据给遮盖。其次是网上的方法大多数是截取成一个矩形。不能自定义的截取自己所需要的。经过尝试，决定修改下cesium heatmap，让他达到我们需要的要求。首先先下载 cesium heatmap包。其中我们可以看到也是通过叠加entity达到添加canvas的方法绘制到地图上。我们先把这一段代码注释} else {} };
python读写json文件方法详解
文章浏览阅读1.2w次，点赞3次，收藏19次。在 Python中读取 json文件也可以使用 sort （）函数，在这里我介绍一个简单的示例程序： （4）如果我们想将字符串转换为列表形式，只需要添加一个变量来存储需要转换的字符串即可。在上面的代码中，我们创建了一个名为` read`的对象，然后在文件的开头使用`./`关键字来命名该对象，并在文件中定义了一个名为` json`的变量，并在其中定义了一个名为` json`的字段。比如，我们可以使用 read方法读取 json文件中的内容，然后使用 send方法将其发送到 json文件中。_python怎么读取json文件
Python API：它是什么以及如何使用它
文章浏览阅读1.4k次。首字母缩略词 API 代表应用程序编程接口，它是一种设备，例如用于使用编程代码发送和检索数据的服务器。最常见的是，该技术用于从源检索数据并将其显示给软件应用程序及其用户。当您访问网页时，API 的工作方式与浏览器相同，信息请求会发送到服务器，如何在 Windows PC 中手动创建系统还原点服务器会做出响应。唯一的区别是服务器响应的数据类型，对于 API，数据是 JSON 类型。JSON 代表 JavaScript Object Notation，它是大多数软件语言中 API 的标准数据表示法。_api是什么 python
解决一个JSON反序列化问题-空字符串变为空集合
文章浏览阅读802次，点赞10次，收藏10次。解决一个JSON反序列化问题-空字符串变为空集合_cannot coerce empty string ("") to element of `java.util.arraylist
Untiy Json和Xml的序列化和反序列化
文章浏览阅读882次。Unity Json和Xml的序列化和反序列化_unity json反序列化存储换行
使用ant design vue的a-upload上传组件，自定义上传事件，点了导入图标按钮就自动打开了电脑上的文件夹，将选中的.json文件里的数据解析出来页面使用（纯前端操作）
文章浏览阅读796次。reader.readAsText(data.file)中data.file的数据格式为。使用FileReader对象读取文件内容，最后将文件内容进行处理使用。_a-upload 同时支持文件和文件夹
json解析之fastjson和jackson使用对比
文章浏览阅读775次，点赞19次，收藏10次。fastjson是由国内的阿里推出的一种json处理器，由java语言编写，无依赖，不需要引用额外的jar包，能直接运行在jdk环境中，它的解析速度是非常之快的，目前超过了所有json库。提示：以下是引用fastjson的方法，数据未涉及到私密信息。_解析器用fastjson还是jackson
【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用
文章浏览阅读940次。【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用_使用什么方法检查qjsondocument是否为空
ajax与 JSON
文章浏览阅读957次，点赞34次，收藏22次。主要内容原生 ajax重点重点JSON熟悉章节目标掌握原生 ajax掌握jQuery ajax掌握JSON第一节 ajax1. 什么是ajaxAJAX 全称为，表示异步的Java脚本和Xml文件，是一种异步刷新技术。2. 为什么要使用ajaxServlet进行网页的变更往往是通过请求转发或者是重定向来完成，这样的操作更新的是整个网页，如果我们只需要更新网页的局部内容，就需要使用到AJAX来处理了。因为只是更新局部内容，因此，Servlet。
@JsonFormat与@DateTimeFormat
文章浏览阅读1.4k次，点赞45次，收藏13次。主要介绍了JsonFormat与@DateTimeFormat注解实例解析,文中通过示例代码介绍的非常详细，对大家的学习 或者工作具有一定的参考学习价值,需要的朋友可以参考下 这篇文章主要介绍了从数据库获取时间传到前端进行展示的时候，我们有时候可能无法得到一个满意的时间格式的时间日期，在数据库中显 示的是正确的时间格式，获取出来却变成了时间戳，@JsonFormat注解很好的解决了这个问题，我们通过使用 @JsonFormat可以很好的解决：后台到前台时间格式保持一致的问题，
@JsonDeserialize和@JsonSerialize注解的使用
文章浏览阅读1k次。JsonDeserialize：json反序列化注解，作用于setter()方法，将json数据反序列化为java对象。可以理解为用在处理接收的数据上。_jsondeserialize
labelme标注的json文件转yolo格式
文章浏览阅读2.7k次。labelme标注的json文件是在数据标注时产生，不能直接应用于模型训练。各大目标检测训练平台或项目框架均有自己的数据格式要求，通常为voc、coco或yolo格式。由于yolov8项目比较火热，故此本博文详细介绍将json格式标注转化为yolo格式的过程及其代码。_labelme json 转 yolo
mysql聚合函数andjson_object 例子
文章浏览阅读790次，点赞26次，收藏6次。GROUP_CONCAT_UNORDERED(): 与GROUP_CONCAT类似，但不保证结果的顺序。COUNT_DISTINCT_AND_ORDERED(): 计算指定列的不同值的数量，并保持结果的顺序。COUNT_ALL_DISTINCT(): 计算指定列的所有不同值的数量（包括NULL）。AVG_RANGE(): 计算指定列的最大值和最小值之间的差异的平均值。JSON_OBJECT(): 将结果集中的行转换为JSON对象。COUNT_DISTINCT(): 计算指定列的不同值的数量。_mysql json 聚合
ajax同步与异步,json-serve的安装与使用,node.js的下载
文章浏览阅读1.2k次。ajax同步与异步,json-serve的安装与使用,node.js的下载_json-serve 与node版本
C# 操作json
文章浏览阅读1.7k次。`.net core`提供了Json处理模块，在命名空间`System.Text.Json`中，下面通过顶级语句，对C#的Json功能进行讲解。_c# json
python之json文件读写操作
文章浏览阅读2.8k次。主要介绍了python对于json文件的读写操作内容_python读取json文件
Json中文乱码问题的解决方法——C#实现
文章浏览阅读770次。然而，有时候在处理包含中文字符的Json数据时会出现乱码的情况。本文将介绍一种解决Json中文乱码问题的常见方法，并提供相应的源代码和描述。而某些情况下，中文字符可能会被错误地编码或解码，导致乱码的出现。通过适当地控制编码和解码过程，我们可以有效地处理包含中文字符的Json数据，避免乱码的发生。通过控制编码和解码过程，我们可以确保Json数据中的中文字符能够正确地传输和解析。为了解决这个问题，我们可以使用C#的System.Text.Encoding类提供的方法进行编码和解码的控制。_c# json 中文编码
【工具】XML和JSON互相转换
文章浏览阅读997次。【代码】【工具】XML和JSON互相转换。_xml 转json
jsonpath提取数据
文章浏览阅读1.1k次。json path 提取数据_jsonpath数组取值
pandas read_json时ValueError: Expected object or value的解决方案
文章浏览阅读3w次，点赞35次，收藏36次。本文主要介绍了pandas read_json时ValueError: Expected object or value的解决方案，希望能对学习python的同学们有所帮助。文章目录1. 问题描述2. 解决方案_valueerror: expected object or value
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot