JavaScript Object Notation 必知必会

今天我们来看一个常见的概念 —— JSON，来看下它的概念、使用、技巧、相关工具!,JSON 全称为 JavaScript Object Notation，是一种轻量级的数据交换格式。它是 JavaScript 中用于描述对象数据的语法的扩展。不过并不限于与 JavaScript 一起使用。它采用完全独立于语言的文本格式，这些特性使 JSON 成为理想的数据交换格式。易于阅读和编写，同时也易于机器解析和生成。所有现代编程语言都支持这些数据结构，使 JSON 完全独立于语言。,在 2000 年代初期，Douglas Crockford 创建了 JSON 以实现最小化、可移植和文本化。作为 JavaScript 的一个子集，JSON 与 Web 浏览器脚本语言大约在同一时间流行起来。到 2010 年代初，JSON 成为新公共 API 的流行选择。,JSON 于 2013 年标准化为 ECMA-404，并于 2017 年发布为 RFC8259。RFC 和 ECMA 标准保持一致。JSON 的官方媒体类型是 application/json，JSON 文件名使用扩展名 .json。,JSON 源于对无状态、实时的服务器到浏览器通信协议的需求，它旨在成为 XML 的轻量级替代方案，以允许在移动处理场景和Web 上轻松解析 JavaScript。,JSON 通常与 REST 服务相关联，尤其是对于 Web 上的 API。尽管 API 的 REST 架构允许使用任何格式，但 JSON 提供了一种更灵活的消息格式，可以提高通信速度。在开发需要快速、紧凑和方便的数据序列化的 Web 或移动应用程序时，它非常有用。,JSON 的流行正是因为网站和移动应用程序需要更快捷、有效地将数据从一个系统传输到另一个系统。JSON 可以通过多种方式共享数据、存储设置以及与系统交互。它的简单性和灵活性使其适用于许多不同的情况。,JSON 最常见的用法是通过网络连接交换序列化数据。JSON 的其他常见用途包括公共、前端或内部 API、NoSQL 数据库、模式描述、配置文件、公共数据或数据导出。,JSON 的特点如下：,JSON 易于编写和阅读，并且易于在大多数语言使用的数据结构之间进行转换。下面来看一下 JSON 的组成、JSON 支持的数据类型。,下面是一个最基本的 JSON 示例：,在上面的示例中，key是 name，value 是 zhangsan。JSON 可以保存多个 key:value对：,当然这只是一个简单的例子，在实际应用中 JSON 可能会多层嵌套。对象和数组是可以保存其他值的值，因此 JSON 数据可能会发生无限嵌套。这允许 JSON 描述大多数数据类型。,下面是 JSON 数据类型的完整列表：,下面是一个包含这些数据类型的 JSON 对象示例：,下面来看看如何避免常见的 JSON 语法错误：,JSON 内置了两种方法：,JSON.parse() 的语法如下：,我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员都会调用此函数：,JSON.stringify() 的语法如下：,那如果 JSON 无效怎么办呢?比如缺少了逗号，引号等，上面的两种方法都会抛出异常。建议在使用这两个方法时使用try...catch来包裹，也可以将其封装成一个函数。,如果 JSON 操作时出现问题，这样就能确保应用程序不会因此中断。,① 删除键值对,可以使用 delete 运算符来删除 JSON 中的键值对：,② 访问数组项,可以使用方括号[]和索引从 JSON 中访问数组项：,③ 遍历数组项,可以使用for循环来遍历 JSON 中的数组项：,下面来看看 JSON 有哪些实用技巧。,上面提到，可以使用JSON.stringify()来将 JSON 对象转换为字符串。它支持第二、三个参数。我们可以借助第二三个参数来格式化 JSON 字符串。正常情况下，格式化后的字符串长这样：,添加第二三个参数：,生成的字符串格式如下：,这里的 2 其实就是为返回值文本在每个级别缩进 2 个空格。,如果缩进是一个字符串而不是空格，就可以传入需要缩进的填充字符串：,输出结果如下：,我们知道JSON.stringify()支持第二个参数，用来处理 JSON 中的数据：,可以将第二个参数抽离出一个函数：,当 JSON 中的内容很多时，想要查看指定字段是比较困难的。可以借助JSON.stringify()的第二个属性来获取指定值，只需传入指定一个包含要查看的属性 key 的数组即可：,最后来推荐几个好用的 JSON 查看器。,JSON Hero 是一个开源的、漂亮的 JSON 查看器，它提供了包含额外功能的干净美观的 UI，使阅读和理解 JSON 文件变得容易。,Github：https://github.com/jsonhero-io/jsonhero-web,JSON Visio 是一个 JSON 数据的可视化工具，它可以无缝地在图表上展示数据，而无需重组任何内容、直接粘贴或导入文件。,Github：https://github.com/AykutSarac/jsonvisio.com,JSON Viewer Pro 是一个Chrome扩展程序，主要用于可视化JSON文件。其核心功能包括：,输入界面如下：,格式化之后：,[1] JSONLint: https://jsonlint.com/。,[2] JSONedit: https://mb21.github.io/JSONedit/。,[3] JSON API: https://jsonapi.org/。,[4] JSON Formatter: https://jsonformatter.org/。,[5] JSON Generator: https://extendsclass.com/json-generator.html。