旷世神医,完美世界辰东

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

JavaScriptObjectNotation必知必會

今天我們來看一個常見的概念 —— JSON，來看下它的概念、使用、技巧、相關(guān)工具!

一、JSON 概述

1. 概念

JSON 全稱為 JavaScript Object Notation，是一種輕量級的數(shù)據(jù)交換格式。它是 JavaScript 中用于描述對象數(shù)據(jù)的語法的擴(kuò)展。不過并不限于與 JavaScript 一起使用。它采用完全獨立于語言的文本格式，這些特性使 JSON 成為理想的數(shù)據(jù)交換格式。易于閱讀和編寫，同時也易于機器解析和生成。所有現(xiàn)代編程語言都支持這些數(shù)據(jù)結(jié)構(gòu)，使 JSON 完全獨立于語言。

2、歷史

在 2000 年代初期，Douglas Crockford 創(chuàng)建了 JSON 以實現(xiàn)最小化、可移植和文本化。作為 JavaScript 的一個子集，JSON 與 Web 瀏覽器腳本語言大約在同一時間流行起來。到 2010 年代初，JSON 成為新公共 API 的流行選擇。

JSON 于 2013 年標(biāo)準(zhǔn)化為 ECMA-404，并于 2017 年發(fā)布為 RFC8259。RFC 和 ECMA 標(biāo)準(zhǔn)保持一致。JSON 的官方媒體類型是 application/json，JSON 文件名使用擴(kuò)展名 .json。

JSON 源于對無狀態(tài)、實時的服務(wù)器到瀏覽器通信協(xié)議的需求，它旨在成為 XML 的輕量級替代方案，以允許在移動處理場景和Web 上輕松解析 JavaScript。

JSON 通常與 REST 服務(wù)相關(guān)聯(lián)，尤其是對于 Web 上的 API。盡管 API 的 REST 架構(gòu)允許使用任何格式，但 JSON 提供了一種更靈活的消息格式，可以提高通信速度。在開發(fā)需要快速、緊湊和方便的數(shù)據(jù)序列化的 Web 或移動應(yīng)用程序時，它非常有用。

3. 特點

JSON 的流行正是因為網(wǎng)站和移動應(yīng)用程序需要更快捷、有效地將數(shù)據(jù)從一個系統(tǒng)傳輸?shù)搅硪粋€系統(tǒng)。JSON 可以通過多種方式共享數(shù)據(jù)、存儲設(shè)置以及與系統(tǒng)交互。它的簡單性和靈活性使其適用于許多不同的情況。

JSON 最常見的用法是通過網(wǎng)絡(luò)連接交換序列化數(shù)據(jù)。JSON 的其他常見用途包括公共、前端或內(nèi)部 API、NoSQL 數(shù)據(jù)庫、模式描述、配置文件、公共數(shù)據(jù)或數(shù)據(jù)導(dǎo)出。

JSON 的特點如下：

緊湊、高效的格式：JSON 語法提供了簡單的數(shù)據(jù)解析和更快的實現(xiàn)。
易于閱讀：人類和計算機都可以快速解釋語法且錯誤最少。
廣泛支持：大多數(shù)語言、操作系統(tǒng)和瀏覽器都可以使用開箱即用的 JSON，這允許使用 JSON 而不存在兼容性問題。
自我描述：很容易區(qū)分?jǐn)?shù)據(jù)類型，并且更容易解釋數(shù)據(jù)，而無需提前知道會發(fā)生什么。
格式靈活：JSON 支持多種數(shù)據(jù)類型，可以組合起來表達(dá)大多數(shù)數(shù)據(jù)的結(jié)構(gòu)。

二、JSON 結(jié)構(gòu)和語法

JSON 易于編寫和閱讀，并且易于在大多數(shù)語言使用的數(shù)據(jù)結(jié)構(gòu)之間進(jìn)行轉(zhuǎn)換。下面來看一下 JSON 的組成、JSON 支持的數(shù)據(jù)類型。

1. 結(jié)構(gòu)

下面是一個最基本的 JSON 示例：

{"name": "zhangsan"}

在上面的示例中，key是 name，value 是 zhangsan。JSON 可以保存多個 key:value對：

{"name": "zhangsan", "age": 18, "city": "beijing"}

當(dāng)然這只是一個簡單的例子，在實際應(yīng)用中 JSON 可能會多層嵌套。對象和數(shù)組是可以保存其他值的值，因此 JSON 數(shù)據(jù)可能會發(fā)生無限嵌套。這允許 JSON 描述大多數(shù)數(shù)據(jù)類型。

下面是 JSON 數(shù)據(jù)類型的完整列表：

string：用引號括起來的文字。
number：正整數(shù)或負(fù)整數(shù)或浮點數(shù)。
object：用花括號括起來的鍵值對
array：一個或多個 JSON 對象的集合。
boolean：不帶引號的 true 或 false 值。
null：表示鍵值對沒有數(shù)據(jù)，表示為null，不帶引號。

下面是一個包含這些數(shù)據(jù)類型的 JSON 對象示例：

{
  "name": "zhangsan",
  "age": 28,
  "badperson":true,
  "child": {
    "name": "zhangxiaosan",
    "age": 8
  },
  "job": ["React", "JavaScript"],
  "wages": null,
}

2. 語法

下面來看看如何避免常見的 JSON 語法錯誤：

始終將鍵值對保存在雙引號內(nèi)，大多數(shù) JSON 解析器使用雙引號解析 JSON 對象。
切勿在 key 中使用連字符。而是使用下劃線 (_)、全部小寫或駝峰式大小寫。
使用 JSON linter 來檢查 JSON 是有效的，可以使用 JSONLint 等工具進(jìn)行校驗。

三、JSON 解析與序列化

JSON 內(nèi)置了兩種方法：

JSON.parse() ：將數(shù)據(jù)轉(zhuǎn)換為 JavaScript 對象。
JSON.stringify() ：將 JavaScript 對象轉(zhuǎn)換為字符串。

1、 JSON.parse()

JSON.parse() 的語法如下：

JSON.parse(text, reviver)

text： 必需，一個有效的 JSON 字符串。
reviver：可選，一個轉(zhuǎn)換結(jié)果的函數(shù)，將為對象的每個成員調(diào)用此函數(shù)。

const json = '{"name": "zhangsan", "age": 18, "city": "beijing"}';
const myJSON = JSON.parse(json);
console.log(myJSON.name, myJSON.age);  // zhangsan 18

我們可以啟用 JSON.parse 的第二個參數(shù) reviver，一個轉(zhuǎn)換結(jié)果的函數(shù)，對象的每個成員都會調(diào)用此函數(shù)：

const json = '{"name": "zhangsan", "age": 18, "city": "beijing"}';
const myJSON = JSON.parse(json, (key, value) => {
  if(typeof value === "number") {
     return String(value).padStart(3, "0");
  }
  return value;
}); 
console.log(myJSON.name, myJSON.age);  // zhangsan 018

2.、 JSON.stringify()

JSON.stringify() 的語法如下：

JSON.stringify(value, replacer, space)

value： 必需，要轉(zhuǎn)換的 JavaScript 值(通常為對象或數(shù)組)。
replacer： 可選。用于轉(zhuǎn)換結(jié)果的函數(shù)或數(shù)組。如果 replacer 為函數(shù)，則 JSON.stringify 將調(diào)用該函數(shù)，并傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數(shù)返回 undefined，則排除成員。根對象的鍵是一個空字符串：""。如果 replacer 是一個數(shù)組，則僅轉(zhuǎn)換該數(shù)組中具有鍵值的成員。成員的轉(zhuǎn)換順序與鍵在數(shù)組中的順序一樣。當(dāng) value 參數(shù)也為數(shù)組時，將忽略 replacer 數(shù)組。
space： 可選，文本添加縮進(jìn)、空格和換行符，如果 space 是一個數(shù)字，則返回值文本在每個級別縮進(jìn)指定數(shù)目的空格，如果 space 大于 10，則文本縮進(jìn) 10 個空格。space 也可以使用非數(shù)字，如：\t。

const json = {"name": "zhangsan", "age": 18, "city": "beijing"};
const myJSON = JSON.stringify(json);
console.log(myJSON);  // {"name":"zhangsan","age":18,"city":"beijing"}

3、異常處理

那如果 JSON 無效怎么辦呢?比如缺少了逗號，引號等，上面的兩種方法都會拋出異常。建議在使用這兩個方法時使用try...catch來包裹，也可以將其封裝成一個函數(shù)。

let myJSON = {}
const json = '{"name": "zhangsan", "age": 18, "city": "beijing"}';
try {
  myJSON = JSON.parse(json);
} catch (e){
  console.error(e.message)
}
console.log(myJSON.name, myJSON.age);  // zhangsan 18

如果 JSON 操作時出現(xiàn)問題，這樣就能確保應(yīng)用程序不會因此中斷。

4、其他操作

① 刪除鍵值對

可以使用 delete 運算符來刪除 JSON 中的鍵值對：

const json = {"name": "zhangsan", "age": 18, "city": "beijing"};
delete json.city;
console.log(json);  // {name: 'zhangsan', age: 18}

② 訪問數(shù)組項

可以使用方括號[]和索引從 JSON 中訪問數(shù)組項：

const json = {
  "name": "zhangsan",
  "age": 18,
  "job": ["React", "JavaScript"],
};

console.log(json.job[0]); // React

③ 遍歷數(shù)組項

可以使用for循環(huán)來遍歷 JSON 中的數(shù)組項：

const json = {
  "name": "zhangsan",
  "age": 18,
  "job": ["React", "JavaScript"],
};

for (item of json.job) {
    console.log(item);  // React JavaScript
}

四、實用技巧

下面來看看 JSON 有哪些實用技巧。

1、格式化

上面提到，可以使用JSON.stringify()來將 JSON 對象轉(zhuǎn)換為字符串。它支持第二、三個參數(shù)。我們可以借助第二三個參數(shù)來格式化 JSON 字符串。正常情況下，格式化后的字符串長這樣：

const json = {"name": "zhangsan", "age": 18, "city": "beijing"};
const myJSON = JSON.stringify(json);
console.log(myJSON);  // {"name":"zhangsan","age":18,"city":"beijing"}

添加第二三個參數(shù)：

const json = {"name": "zhangsan", "age": 18, "city": "beijing"};
const myJSON = JSON.stringify(json, null, 2);
console.log(myJSON);

生成的字符串格式如下：

{
  "name": "zhangsan",
  "age": 18,
  "city": "beijing"
}

這里的 2 其實就是為返回值文本在每個級別縮進(jìn) 2 個空格。

如果縮進(jìn)是一個字符串而不是空格，就可以傳入需要縮進(jìn)的填充字符串：

const json = {"name": "zhangsan", "age": 18, "city": "beijing"};
const myJSON = JSON.stringify(json, null, "--");

輸出結(jié)果如下：

{
--"name": "zhangsan",
--"age": 18,
--"city": "beijing"
}

2、隱藏屬性

我們知道JSON.stringify()支持第二個參數(shù)，用來處理 JSON 中的數(shù)據(jù)：

const user = {
  "name": "John",
  "password": "12345",
  "age": 30
};
console.log(JSON.stringify(user, (key, value) => {
    if (key === "password") {
       return;
    }
    return value;
}));
// 輸出結(jié)果：{"name":"John","age":30}

可以將第二個參數(shù)抽離出一個函數(shù)：

function stripKeys(...keys) {
    return (key, value) => {
        if (keys.includes(key)) {
           return;
        }
        return value;
    };
}
const user = {
  "name": "John",
  "password": "12345",
  "age": 30,
  "gender": "male"
};
console.log(JSON.stringify(user, stripKeys('password', 'gender')))
// 輸出結(jié)果：{"name":"John","age":30}

3、過濾結(jié)果

當(dāng) JSON 中的內(nèi)容很多時，想要查看指定字段是比較困難的。可以借助JSON.stringify()的第二個屬性來獲取指定值，只需傳入指定一個包含要查看的屬性 key 的數(shù)組即可：

const user = {
    "name": "John",
    "password": "12345",
    "age": 30
}
console.log(JSON.stringify(user, ['name', 'age']))

// 輸出結(jié)果：{"name":"John","age":30}

五、JSON 工具

最后來推薦幾個好用的 JSON 查看器。

1、 JSON Hero

JSON Hero 是一個開源的、漂亮的 JSON 查看器，它提供了包含額外功能的干凈美觀的 UI，使閱讀和理解 JSON 文件變得容易。

以任何方式查看 JSON：列視圖、樹視圖、編輯器視圖等。
自動推斷字符串的內(nèi)容并提供有用的預(yù)覽。
創(chuàng)建可用于驗證 JSON 的推斷 JSON 模式。
快速掃描相關(guān)值以檢查邊緣情況。
搜索您的 JSON 文件(鍵和值)。
可使用鍵盤。
具有路徑支持的可輕松共享的 URL。

Github：https://github.com/jsonhero-io/jsonhero-web

2、 JSON Visio

JSON Visio 是一個 JSON 數(shù)據(jù)的可視化工具，它可以無縫地在圖表上展示數(shù)據(jù)，而無需重組任何內(nèi)容、直接粘貼或?qū)胛募?/p>

Github：https://github.com/AykutSarac/jsonvisio.com

3、 JSON Viewer Pro

JSON Viewer Pro 是一個Chrome擴(kuò)展程序，主要用于可視化JSON文件。其核心功能包括：

支持將JSON數(shù)據(jù)進(jìn)行格式化，并使用屬性或者圖表進(jìn)行展示。
使用面包屑深入遍歷 JSON 屬性。
在輸入?yún)^(qū)寫入自定義 JSON。
導(dǎo)入本地 JSON 文件。
使用上下文菜單下載 JSON 文件。
網(wǎng)址過濾器。
改變主題。
自定義 CSS。
復(fù)制屬性和值。

輸入界面如下：

格式化之后：

4、其他工具

JSONLint[1]：JSON 數(shù)據(jù)的驗證器。
JSONedit[2]：一個可視化 JSON 構(gòu)建器，可以輕松構(gòu)建具有不同數(shù)據(jù)類型的復(fù)雜 JSON 結(jié)構(gòu)。
JSON API[3]：用于在 JSON 中構(gòu)建 API 的規(guī)范。
JSON Formatter[4]：用于驗證、美化、縮小和轉(zhuǎn)換 JSON 數(shù)據(jù)的在線工具。
JSON Generator[5]：生成隨機 JSON 數(shù)據(jù)的在線工具。

新聞中心

一、JSON 概述

1. 概念

2、歷史

3. 特點

二、JSON 結(jié)構(gòu)和語法

1. 結(jié)構(gòu)

2. 語法

三、JSON 解析與序列化

1、 JSON.parse()

2.、 JSON.stringify()

3、異常處理

4、其他操作

四、實用技巧

1、格式化

2、隱藏屬性

3、過濾結(jié)果

五、JSON 工具

1、 JSON Hero

2、 JSON Visio

3、 JSON Viewer Pro

4、其他工具

相關(guān)資源：

其他資訊

新聞中心

一、JSON 概述

1. 概念

2、 歷史

3. 特點

二、JSON 結(jié)構(gòu)和語法

1. 結(jié)構(gòu)

2. 語法

三、JSON 解析與序列化

1、 JSON.parse()

2.、 JSON.stringify()

3、 異常處理

4、 其他操作

四、實用技巧

1、 格式化

2、隱藏屬性

3、 過濾結(jié)果

五、JSON 工具

1、 JSON Hero

2、 JSON Visio

3、 JSON Viewer Pro

4、 其他工具

相關(guān)資源：

其他資訊

一、JSON 概述

2、歷史

三、JSON 解析與序列化

1、 JSON.parse()

3、異常處理

4、其他操作

四、實用技巧

1、格式化

3、過濾結(jié)果

1、 JSON Hero

2、 JSON Visio

3、 JSON Viewer Pro

4、其他工具