從 JSON 說起

Grewer發表於2021-09-26
JSON

標準 JSON 格式

js 中的 JSON

JavaScript Object Notation (JSON) 是一種資料交換格式。儘管不是嚴格意義上的子集，JSON 非常接近 JavaScript 語法的子集。

js 轉換 JSON

json 更接近是 js 支援的原生語法, 所以他也內建瞭解析 API:

JSON.stringify

此方法將一個 JavaScript 物件或值轉換為 JSON 字串，如果指定了一個 replacer 函式，則可以選擇性地替換值，或者指定的 replacer 是陣列，則可選擇性地僅包含陣列指定的屬性。

第二個引數常用來刪除,替換:

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);
// {"week":45,"month":7}  列印結果  類似於 去除了value 是字串的型別

如果第二個引數是一個陣列:

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};

JSON.stringify(foo, ['week', 'month']);
// '{"week":45,"month":7}' 他將值保留這兩陣列對應的結果

第三個引數常用來格式化 json:

JSON.stringify({ a: 2 }, null, " ");
// 列印結果: '{\n "a": 2\n}'

// 或者這樣:
JSON.stringify({ a: 2 }, null, 2);

JSON.parse

方法用來解析JSON字串，構造由字串描述的JavaScript值或物件。提供可選的 reviver 函式用以在返回之前對所得到的物件執行變換(操作)。
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

JSON.parse 解析經常會報錯, 所以我們也需要 try...catch 來包裹它

需要注意的是: JSON.parse() 不允許用逗號作為結尾
如: JSON.parse('{"foo" : 1, }');

另外的方案

在 JS 中想要解析成 json 物件, 還可以使用另一種 hack 的方案:

var a = '{"foo" : 1, }'
eval(`(${a})`)
//  {foo: 1}

可以看到它的轉換是十分寬鬆的, 甚至他還支援, 但引號和無引號

其實他利用的就是 js 的解析能力, 但是 使用 eval 同樣也會存在隱患(主要是在效能, 安全性上問題很大)

相關 JSON 庫

這邊就將一些 json 相關的, 可能會使用到的庫介紹下

JSON-js
用來相容 ie8, 類似於官方提供的 JSON API mock, 現在應該不常用到

parse-json
解析 json 的時候, 會提供更有用的錯誤, 這個庫在搭建基礎環境的時候更有作用

在某些業務場景下(自定義欄位, 自定義表單等等)也能發揮巨大作用

strip-json-comments

允許在 json 中使用註釋, 在解析時刪除, 在配置檔案, 或者基礎庫中可以作為使用

JSONStream
一個解析庫, 可以根據一些配置來解析 json

node 中操作 JSON

在 node 中因為要操作檔案, 並且又要轉換 json, 所以搞得很麻煩, 這裡我會使用這個庫:

jsonfile

在讀取配置檔案的時候也是異常好用

其他格式

既然聊到了 json,我們也需要了解下其他格式, 以及他的優缺點

CSV

其檔案以純文字形式儲存表格資料（數字和文字）。純文字意味著該檔案是一個字元序列，不含必須像二進位制數字那樣被解讀的資料。CSV檔案由任意數目的記錄組成，記錄間以某種換行符分隔；

Passenger,Id,Survived,Pclass,Name,Sex.Age
1,0,3 Braund, Mr. Owen Harris ,male, 22
2,1,1 Cumings, Mrs. John Bradley (Florence Briggs Thayer), female,38

看起來像是簡潔版的 table 格式

papaparse: 這個庫是可以使用 js 來解析 csv 格式的

YAML

擁有幾乎所有 web 程式語言都可用的解析器。它還有一些額外的功能，如迴圈引用、軟包裝、多行鍵、型別轉換標籤、二進位制資料、物件合併和集合對映。它具有非常好的可讀性和可寫性，並且是 JSON 的超集，因此你可以在 YAML 中使用完全合格的 JSON 語法並且一切正常工作。你幾乎不需要引號，它可以解釋大多數基本資料型別（字串、整數、浮點數、布林值等）。

books:
  - id: bk102
  author: Crockford, Douglas
  title: 'JavaScript: The Good Parts'
  genre: Computer

在 js 中解析 YAML:

XML

XML 語言非常靈活且易於編寫，但它的缺點是冗長，人類難以閱讀、計算機非常難以讀取，並且有很多語法對於傳達資訊並不是完全必要的。

<book id="bk101">
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<genre>Computer</genre>

解析庫: htmlparser2

TOML

允許以相當快捷、簡潔的方式定義深層巢狀的資料結構。與 JSON 相比，語法有點尷尬，更類似 ini 檔案。這不是一個糟糕的語法，但是需要一些時間適應。

[a.b.c]
d = 'Hello'
e = 'World'

使用 TOML，你可以肯定在時間和檔案長度上會節省不少。很少有系統使用它或非常類似的東西作為配置，這是它最大的缺點。根本沒有很多語言或庫可以用來解釋 TOML。

toml 目前來看暫時只支援 node

總結

目前看起來 json 是一種不錯的交換,傳遞資訊的格式, 有挺多缺點(當然他也能被某些庫解決)

但是個人來說YAML, 是一個更加熱門, 有未來發展空間的格式, 希望大家有空也學習一下

參考文件:

相關文章