JavaScriptObjectNotation必知必會(huì)

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

一、JSON 概述

1. 概念

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

2、歷史

在 2000 年代初期，Douglas Crockford 創(chuàng)建了 JSON 以實(shí)現(xiàn)最小化、可移植和文本化。作為 JavaScript 的一個(gè)子集，JSON 與 Web 瀏覽器腳本語言大約在同一時(shí)間流行起來。到 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 源于對(duì)無狀態(tài)、實(shí)時(shí)的服務(wù)器到瀏覽器通信協(xié)議的需求，它旨在成為 XML 的輕量級(jí)替代方案，以允許在移動(dòng)處理場景和Web 上輕松解析 JavaScript。

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

3. 特點(diǎn)

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

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

JSON 的特點(diǎn)如下：

緊湊、高效的格式：JSON 語法提供了簡單的數(shù)據(jù)解析和更快的實(shí)現(xiàn)。
易于閱讀：人類和計(jì)算機(jī)都可以快速解釋語法且錯(cuò)誤最少。
廣泛支持：大多數(shù)語言、操作系統(tǒng)和瀏覽器都可以使用開箱即用的 JSON，這允許使用 JSON 而不存在兼容性問題。
自我描述：很容易區(qū)分?jǐn)?shù)據(jù)類型，并且更容易解釋數(shù)據(jù)，而無需提前知道會(huì)發(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)

下面是一個(gè)最基本的 JSON 示例：

{"name": "zhangsan"}

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

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

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

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

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

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

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

2. 語法

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

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

三、JSON 解析與序列化

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

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

1、 JSON.parse()

JSON.parse() 的語法如下：

JSON.parse(text, reviver)

text： 必需，一個(gè)有效的 JSON 字符串。
reviver：可選，一個(gè)轉(zhuǎn)換結(jié)果的函數(shù)，將為對(duì)象的每個(gè)成員調(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 的第二個(gè)參數(shù) reviver，一個(gè)轉(zhuǎn)換結(jié)果的函數(shù)，對(duì)象的每個(gè)成員都會(huì)調(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 值(通常為對(duì)象或數(shù)組)。
replacer： 可選。用于轉(zhuǎn)換結(jié)果的函數(shù)或數(shù)組。如果 replacer 為函數(shù)，則 JSON.stringify 將調(diào)用該函數(shù)，并傳入每個(gè)成員的鍵和值。使用返回值而不是原始值。如果此函數(shù)返回 undefined，則排除成員。根對(duì)象的鍵是一個(gè)空字符串：""。如果 replacer 是一個(gè)數(shù)組，則僅轉(zhuǎn)換該數(shù)組中具有鍵值的成員。成員的轉(zhuǎn)換順序與鍵在數(shù)組中的順序一樣。當(dāng) value 參數(shù)也為數(shù)組時(shí)，將忽略 replacer 數(shù)組。
space： 可選，文本添加縮進(jìn)、空格和換行符，如果 space 是一個(gè)數(shù)字，則返回值文本在每個(gè)級(jí)別縮進(jìn)指定數(shù)目的空格，如果 space 大于 10，則文本縮進(jìn) 10 個(gè)空格。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 無效怎么辦呢?比如缺少了逗號(hào)，引號(hào)等，上面的兩種方法都會(huì)拋出異常。建議在使用這兩個(gè)方法時(shí)使用try...catch來包裹，也可以將其封裝成一個(gè)函數(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 操作時(shí)出現(xiàn)問題，這樣就能確保應(yīng)用程序不會(huì)因此中斷。

4、其他操作

① 刪除鍵值對(duì)

可以使用 delete 運(yùn)算符來刪除 JSON 中的鍵值對(duì)：

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

② 訪問數(shù)組項(xiàng)

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

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

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

③ 遍歷數(shù)組項(xiàng)

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

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

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

四、實(shí)用技巧

下面來看看 JSON 有哪些實(shí)用技巧。

1、格式化

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

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

添加第二三個(gè)參數(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 其實(shí)就是為返回值文本在每個(gè)級(jí)別縮進(jìn) 2 個(gè)空格。

如果縮進(jìn)是一個(gè)字符串而不是空格，就可以傳入需要縮進(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()支持第二個(gè)參數(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}

可以將第二個(gè)參數(shù)抽離出一個(gè)函數(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)容很多時(shí)，想要查看指定字段是比較困難的?？梢越柚鶭SON.stringify()的第二個(gè)屬性來獲取指定值，只需傳入指定一個(gè)包含要查看的屬性 key 的數(shù)組即可：

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

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

五、JSON 工具

最后來推薦幾個(gè)好用的 JSON 查看器。

1、 JSON Hero

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

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

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

2、 JSON Visio

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

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

3、 JSON Viewer Pro

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

av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

JavaScriptObjectNotation必知必會(huì)

一、JSON 概述

1. 概念

2、歷史

3. 特點(diǎn)

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

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

2. 語法

三、JSON 解析與序列化

1、 JSON.parse()

2.、 JSON.stringify()

3、異常處理

4、其他操作

四、實(shí)用技巧

1、格式化

2、隱藏屬性

3、過濾結(jié)果

五、JSON 工具

1、 JSON Hero

2、 JSON Visio

3、 JSON Viewer Pro

4、其他工具

相關(guān)資源：

掃二維碼與項(xiàng)目經(jīng)理溝通

其他資訊

行業(yè)動(dòng)態(tài)

企業(yè)網(wǎng)站建設(shè)的重要性！

服務(wù)項(xiàng)目

網(wǎng)站建設(shè)

移動(dòng)端/APP

微信/小程序

技術(shù)支持

其它服務(wù)

更多服務(wù)項(xiàng)目

聯(lián)系吧在百度地圖上找到我們

電話：13518219792

av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

JavaScriptObjectNotation必知必會(huì)

一、JSON 概述

1. 概念

2、 歷史

3. 特點(diǎn)

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

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

2. 語法

三、JSON 解析與序列化

1、 JSON.parse()

2.、 JSON.stringify()

3、 異常處理

4、 其他操作

四、實(shí)用技巧

1、 格式化

2、隱藏屬性

3、 過濾結(jié)果

五、JSON 工具

1、 JSON Hero

2、 JSON Visio

3、 JSON Viewer Pro

4、 其他工具

相關(guān)資源：

掃二維碼與項(xiàng)目經(jīng)理溝通

其他資訊

行業(yè)動(dòng)態(tài)

企業(yè)網(wǎng)站建設(shè)的重要性！

服務(wù)項(xiàng)目

網(wǎng)站建設(shè)

移動(dòng)端/APP

微信/小程序

技術(shù)支持

其它服務(wù)

更多服務(wù)項(xiàng)目

聯(lián)系吧 在百度地圖上找到我們

電話：13518219792

一、JSON 概述

2、歷史

三、JSON 解析與序列化

1、 JSON.parse()

2.、 JSON.stringify()

3、異常處理

4、其他操作

1、格式化

3、過濾結(jié)果

五、JSON 工具

2、 JSON Visio

3、 JSON Viewer Pro

4、其他工具

企業(yè)網(wǎng)站建設(shè)的重要性！

聯(lián)系吧在百度地圖上找到我們