日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
JavaScriptObjectNotation必知必會

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

一、JSON 概述

1. 概念

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

2、 歷史

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

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

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

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

3. 特點

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

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

JSON 的特點如下：

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

二、JSON 結構和語法

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

1. 結構

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

{"name": "zhangsan"}

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

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

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

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

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

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

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

2. 語法

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

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

三、JSON 解析與序列化

JSON 內置了兩種方法：

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

1、 JSON.parse()

JSON.parse() 的語法如下：

JSON.parse(text, reviver)
  • text： 必需， 一個有效的 JSON 字符串。
  • reviver：可選，一個轉換結果的函數(shù)， 將為對象的每個成員調用此函數(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，一個轉換結果的函數(shù)，對象的每個成員都會調用此函數(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： 必需， 要轉換的 JavaScript 值(通常為對象或數(shù)組)。
  • replacer： 可選。用于轉換結果的函數(shù)或數(shù)組。如果 replacer 為函數(shù)，則 JSON.stringify 將調用該函數(shù)，并傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數(shù)返回 undefined，則排除成員。根對象的鍵是一個空字符串：""。如果 replacer 是一個數(shù)組，則僅轉換該數(shù)組中具有鍵值的成員。成員的轉換順序與鍵在數(shù)組中的順序一樣。當 value 參數(shù)也為數(shù)組時，將忽略 replacer 數(shù)組。
  • space： 可選，文本添加縮進、空格和換行符，如果 space 是一個數(shù)字，則返回值文本在每個級別縮進指定數(shù)目的空格，如果 space 大于 10，則文本縮進 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)問題，這樣就能確保應用程序不會因此中斷。

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 對象轉換為字符串。它支持第二、三個參數(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 其實就是為返回值文本在每個級別縮進 2 個空格。

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

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

輸出結果如下：

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

2、隱藏屬性

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

const user = {
  "name": "John",
  "password": "12345",
  "age": 30
};
console.log(JSON.stringify(user, (key, value) => {
    if (key === "password") {
       return;
    }
    return value;
}));
// 輸出結果：{"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')))
// 輸出結果：{"name":"John","age":30}

3、 過濾結果

當 JSON 中的內容很多時，想要查看指定字段是比較困難的?？梢越柚鶭SON.stringify()的第二個屬性來獲取指定值，只需傳入指定一個包含要查看的屬性 key 的數(shù)組即可：

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

// 輸出結果：{"name":"John","age":30}

五、JSON 工具

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

1、 JSON Hero

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

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

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

2、 JSON Visio

JSON Visio 是一個 JSON 數(shù)據的可視化工具，它可以無縫地在圖表上展示數(shù)據，而無需重組任何內容、直接粘貼或導入文件。

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

3、 JSON Viewer Pro

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

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

輸入界面如下：

格式化之后：

4、 其他工具

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

相關資源：

[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。


當前標題：JavaScriptObjectNotation必知必會
文章分享：http://www.5511xx.com/article/dpsjpde.html