今天我们来看一个常见的概念——JSON，一起来看看它的概念、用途、技巧和相关工具吧！一、JSON概述1、JSON的概念全称是JavaScriptObjectNotation。它是一种轻量级的数据交换格式。它是JavaScript中用于描述对象数据的语法的扩展。不过，它并不局限于与JavaScript一起使用。它使用完全与语言无关的文本格式，这些特性使JSON成为一种理想的数据交换格式。易于读写，也易于机器解析和生成。所有现代编程语言都支持这些数据结构，使得JSON完全独立于语言。2.历史在2000年代初期，DouglasCrockford创建了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或移动应用程序时，它非常有用。3.特性JSON之所以流行，正是因为网站和移动应用程序需要更快、更高效地将数据从一个系统传输到另一个系统。JSON可以通过多种方式共享数据、存储设置并与系统交互。它的简单性和灵活性使其适用于许多不同的情况。JSON最常见的用途是通过网络连接交换序列化数据。JSON的其他常见用途包括公共、前端或内部API、NoSQL数据库、模式描述、配置文件、公共数据或数据导出。JSON的特点如下：紧凑、高效的格式：JSON语法提供了简单的数据解析和更快的实现。易于阅读：人类和计算机都可以快速解释语法，并且错误最少。广泛支持：大多数语言、操作系统和浏览器都可以开箱即用地使用JSON，这允许使用JSON而不会出现兼容性问题。自我描述：很容易区分数据类型，并且在事先不知道会发生什么的情况下更容易解释数据。格式灵活：JSON支持多种数据类型，可以组合起来表达大部分数据的结构。2.JSON结构和语法JSON易于编写和阅读，并且易于在大多数语言使用的数据结构之间进行转换。下面我们来看一下JSON的构成以及JSON支持的数据类型。1.结构下面是一个基本的JSON例子：{"name":"zhangsan"}在上面的例子中，key是name，value是zhangsan。JSON可以存储多个key:value对：{"name":"zhangsan","age":18,"city":"beijing"}当然这只是一个简单的例子，在实际应用中JSON可能是多层的嵌套。对象和数组是可以容纳其他值的值，因此JSON数据的无限嵌套是可能的。这允许JSON描述大多数数据类型。以下是JSON数据类型的完整列表：字符串：用引号括起来的文字。number：正整数或负整数或浮点数。object：包含在大括号中的键值对array：一个或多个JSON对象的集合。布尔值：不带引号的true或false值。null：表示键值对没有数据，表示为null，不带引号。下面是一个包含这些数据类型的JSON对象示例：{"name":"zhangsan","age":28,"badperson":true,"child":{"name":"zhangxiaosan","age":8},"job":["React","JavaScript"],"wages":null,}2.语法让我们看看如何避免常见的JSON语法错误：始终将键值对存储在双引号中，大多数JSON解析器使用双引号来解析JSON对象。切勿在键中使用连字符。相反，请使用下划线(_)、全部小写或驼峰式大小写。使用JSONlinter检查JSON是否有效，可以使用JSONLint等工具进行验证。3.JSON解析和序列化JSON有两个内置方法：JSON.parse()：将数据转换成JavaScript对象。JSON.stringify()：将JavaScript对象转换为字符串。1.JSON.parse()JSON.parse()的语法如下：JSON.parse(text,reviver)text：必填，一个有效的JSON字符串。reviver：可选，一个转换结果的函数，这个函数会被对象的每个成员调用。constjson='{"name":"zhangsan","age":18,"city":"beijing"}';constmyJSON=JSON.parse(json);console.log(myJSON.name,myJSON.age);//zhangsan18我们可以启用JSON.parse的第二个参数reviver，一个转换结果的函数，对象的每个成员都会调用这个函数：constjson='{"name":"zhangsan","age":18、"city":"北京"}';constmyJSON=JSON.parse(json,(key,value)=>{if(typeofvalue==="number"){returnString(value).padStart(3,"0");}返回值;});console.log(myJSON.name,myJSON.age);//zhangsan0182.,JSON.stringify()JSON.stringify()的语法如下：JSON.stringify(value,replacer,space)value：必需，要转换的JavaScript值（通常是对象或数组）。替代品：可选。用于转换结果的函数或数组。如果replacer是一个函数，JSON.stringify将调用该函数，为每个成员传入键和值。使用返回值而不是原始值。如果此函数返回undefined，则该成员被排除在外。根对象的键是一个空字符串：“”。如果replacer是数组，则只转换数组中有键值的成员。成员的转换顺序与键在数组中的顺序相同。当value参数也是一个数组时，将忽略replacer数组。space：可选，为文本添加缩进、空格和换行符。如果space是一个数字，则返回值文本在每个级别缩进指定数量的空格。如果空格大于10，则文本缩进10个空格。空格也可以使用非数字，如：\t。constjson={"name":"zhangsan","age":18,"city":"beijing"};constmyJSON=JSON.stringify(json);console.log(myJSON);//{"name":"zhangsan","age":18,"city":"beijing"}3.异常处理JSON不合法怎么办？比如缺少逗号、引号等，以上两种方法都会抛出异常。推荐使用try...catch将这两个方法包装起来，或者包装成一个函数。letmyJSON={}constjson='{"name":"zhangsan","age":18,"city":"beijing"}';尝试{myJSON=JSON.parse(json);}catch(e){console.error(e.message)}console.log(myJSON.name,myJSON.age);//zhangsan18如果JSON操作出现问题，这样可以保证应用不会中断。4.其他操作①删除键值对删除JSON中的键值对可以使用delete操作符：constjson={"name":"zhangsan","age":18,"city":"beijing"};删除json.city；console.log(json)；//{name:'zhangsan',age:18}②访问数组项可以使用方括号[]和索引从JSON中访问数组项：constjson={"name":"zhangsan","age":18,"工作":["React","JavaScript"],};console.log(json.job[0]);//React③可以使用for遍历数组项循环遍历JSON中的数组项：constjson={"name":"zhangsan","age":18,"job":["React","JavaScript"],};对于（json.job的项目）{console.log(item);//ReactJavaScript}4.实用技巧下面我们来看看JSON的实用技巧。1.格式化上面提到了JSON.stringify()可以用来将JSON对象转换成字符串。它支持第二个和第三个参数。我们可以在第二个和第三个参数的帮助下格式化JSON字符串。通常，格式化后的字符串如下所示：constjson={"name":"zhangsan","age":18,"city":"beijing"};constmyJSON=JSON.stringify(json);控制台日志（myJSON）；//{"name":"zhangsan","age":18,"city":"beijing"}添加第二个和第三个参数：constjson={"name":"zhangsan","age":18,"city":"北京"};constmyJSON=JSON.stringify(json,null,2);console.log(myJSON);生成的字符串格式如下：{"name":"zhangsan","age":18,"city":"beijing"}这里的2其实就是返回值文本每一级缩进2个空格.如果缩进是字符串而不是空格，可以传入需要缩进的padding字符串：constjson={"name":"zhangsan","age":18,"city":"beijing"};constmyJSON=JSON.stringify(json,null,"--");输出如下：{--"name":"zhangsan",--"age":18,--"city":"beijing"}2.隐藏属性我们知道JSON.stringify()支持第二种参数，用于处理JSON中的数据：constuser={"name":"John","password":"12345","age":30};console.log(JSON.stringify(user,(key,value)=>{if(key==="password"){return;}returnvalue;}));//输出结果：{"name":"John","age":30}可以提取函数的第二个参数：functionstripKeys(...keys){return(key,value)=>{if(keys.includes(key)){return;}返回值；};}constuser={"name":"John","password":"12345","age":30,"gender":"male"};console.log(JSON.stringify(user,stripKeys('password','gender')))//Outputresult:{"name":"John","age":30}3.过滤结果当JSON中的内容很多的时候，想要从中获取是比较困难的查看特定字段。可以使用JSON.stringify()的第二个属性获取指定值，只需要传入一个数组，其中包含要查看的属性的键：constuser={"name":"John","password":"12345","age":30}console.log(JSON.stringify(user,['name','age']))//输出结果：{"name":"John","age":30}5.JSON工具最后，我们推荐几个有用的JSON查看器。1.JSONHeroJSONHero是一个开源的、漂亮的JSON查看器，它提供了一个干净漂亮的UI和附加功能，使阅读和理解JSON文件变得容易。以任何方式查看JSON：列视图、树视图、编辑器视图等。自动推断字符串的内容并提供有用的预览。创建可用于验证JSON的推断JSON模式。快速扫描相关值以检查边缘情况。搜索您的JSON文件（键和值）。可以使用键盘。具有路径支持的易于共享的URL。Github:https://github.com/jsonhero-io/jsonhero-web2,JSONVisioJSONVisio是一款JSON数据可视化工具，无需重新组织，直接粘贴或导入文档即可在图表上无缝显示数据。Github：https://github.com/AykutSarac/jsonvisio.com3、JSONViewerProJSONViewerPro是一个Chrome扩展，主要用于可视化JSON文件。其核心功能包括：支持格式化JSON数据并使用属性或图表展示。使用痕迹导航深入了解JSON属性。在输入区域写入自定义JSON。导入本地JSON文件。使用上下文菜单下载JSON文件。网址过滤器。改变主题。自定义CSS。复制属性和值。输入界面如下：格式化后：4.其他工具JSONLint[1]：JSON数据校验器。JSONedit[2]：一个可视化的JSON构建器，可以轻松构建具有不同数据类型的复杂JSON结构。JSONAPI[3]：一种在JSON中构建API的规范。JSONFormatter[4]：用于验证、美化、缩小和转换JSON数据的在线工具。JSONGenerator[5]：一个生成随机JSON数据的在线工具。相关资源：[1]JSONLint：https://jsonlint.com/。[2]JSONedit：https://mb21.github.io/JSONedit/。[3]JSONAPI：https://jsonapi.org/。[4]JSON格式化程序：https://jsonformatter.org/。[5]JSON生成器：https://extendsclass.com/json-generator.html。
