今天我們來看一個常見的概念 —— JSON，來看下它的概念、使用、技巧、相關工具！
一、JSON 概述1. 概念JSON 全稱為 JavaScript Object Notation，是一種輕量級的數據交換格式。它是 JavaScript 中用於描述對象數據的語法的擴展。不過並不限於與 JavaScript 一起使用。它採用完全獨立於語言的文本格式，這些特性使 JSON 成為理想的數據交換格式。易於閱讀和編寫，同時也易於機器解析和生成。所有現代編程語言都支持這些數據結構，使 JSON 完全獨立於語言。
2. 歷史在 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 或移動應用程序時，它非常有用。
3. 特點JSON 的流行正是因為網站和移動應用程序需要更快捷、有效地將數據從一個系統傳輸到另一個系統。JSON 可以通過多種方式共享數據、存儲設置以及與系統交互。它的簡單性和靈活性使其適用於許多不同的情況。
JSON 最常見的用法是通過網絡連接交換序列化數據。JSON 的其他常見用途包括公共、前端或內部 API、NoSQL 數據庫、模式描述、配置文件、公共數據或數據導出。
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 數據類型的完整列表：
下面是一個包含這些數據類型的 JSON 對象示例：
{"name":"zhangsan","age":28,"badperson":true,"child":{"name":"zhangxiaosan","age":8},"job":["React","JavaScript"],"wages":null,}2. 語法下面來看看如何避免常見的 JSON 語法錯誤：
JSON 內置了兩種方法：
JSON.parse() 的語法如下：
JSON.parse(text,reviver)我們可以啟用 JSON.parse 的第二個參數 reviver，一個轉換結果的函數，對象的每個成員都會調用此函數：
constjson='{"name":"zhangsan","age":18,"city":"beijing"}';constmyJSON=JSON.parse(json,(key,value)=>{if(typeofvalue==="number"){returnString(value).padStart(3,"0");}returnvalue;});console.log(myJSON.name,myJSON.age);//zhangsan0182. JSON.stringify()JSON.stringify() 的語法如下：
JSON.stringify(value,replacer,space)那如果 JSON 無效怎麼辦呢？比如缺少了逗號，引號等，上面的兩種方法都會拋出異常。建議在使用這兩個方法時使用try...catch來包裹，也可以將其封裝成一個函數。
letmyJSON={}constjson='{"name":"zhangsan","age":18,"city":"beijing"}';try{myJSON=JSON.parse(json);}catch(e){console.error(e.message)}console.log(myJSON.name,myJSON.age);//zhangsan18如果 JSON 操作時出現問題，這樣就能確保應用程序不會因此中斷。
4. 其他操作① 刪除鍵值對可以使用 delete 運算符來刪除 JSON 中的鍵值對：
constjson={"name":"zhangsan","age":18,"city":"beijing"};deletejson.city;console.log(json);//{name:'zhangsan',age:18}② 訪問數組項可以使用方括號[]和索引從 JSON 中訪問數組項：
constjson={"name":"zhangsan","age":18,"job":["React","JavaScript"],};console.log(json.job[0]);//React③ 遍歷數組項可以使用for循環來遍歷 JSON 中的數組項：
constjson={"name":"zhangsan","age":18,"job":["React","JavaScript"],};for(itemofjson.job){console.log(item);//ReactJavaScript}四、實用技巧下面來看看 JSON 有哪些實用技巧。
1. 格式化上面提到，可以使用JSON.stringify()來將 JSON 對象轉換為字符串。它支持第二、三個參數。我們可以藉助第二三個參數來格式化 JSON 字符串。正常情況下，格式化後的字符串長這樣：
constjson={"name":"zhangsan","age":18,"city":"beijing"};constmyJSON=JSON.stringify(json);console.log(myJSON);//{"name":"zhangsan","age":18,"city":"beijing"}添加第二三個參數：
constjson={"name":"zhangsan","age":18,"city":"beijing"};constmyJSON=JSON.stringify(json,null,2);console.log(myJSON);生成的字符串格式如下：
{"name":"zhangsan","age":18,"city":"beijing"}這裡的 2 其實就是為返回值文本在每個級別縮進 2 個空格。
如果縮進是一個字符串而不是空格，就可以傳入需要縮進的填充字符串：
constjson={"name":"zhangsan","age":18,"city":"beijing"};constmyJSON=JSON.stringify(json,null,"--");console.log(myJSON);輸出結果如下：
{--"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;}returnvalue;};}constuser={"name":"John","password":"12345","age":30,"gender":"male"};console.log(JSON.stringify(user,stripKeys('password','gender')))//輸出結果：{"name":"John","age":30}3. 過濾結果當 JSON 中的內容很多時，想要查看指定字段是比較困難的。可以藉助JSON.stringify()的第二個屬性來獲取指定值，只需傳入指定一個包含要查看的屬性 key 的數組即可：
constuser={"name":"John","password":"12345","age":30}console.log(JSON.stringify(user,['name','age']))//輸出結果：{"name":"John","age":30}五、JSON 工具最後來推薦幾個好用的 JSON 查看器。
1. JSON HeroJSON Hero 是一個開源的、漂亮的 JSON 查看器，它提供了包含額外功能的乾淨美觀的 UI，使閱讀和理解 JSON 文件變得容易。
Github：https://github.com/jsonhero-io/jsonhero-web
2. JSON VisioJSON Visio 是一個 JSON 數據的可視化工具，它可以無縫地在圖表上展示數據，而無需重組任何內容、直接粘貼或導入文件。
Github：https://github.com/AykutSarac/jsonvisio.com
3. JSON Viewer ProJSON Viewer Pro 是一個Chrome擴展程序，主要用於可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之後：
4. 其他工具相關資源：
[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
留言列表