1 つの記事で JSON (JavaScript Object Notation) を理解する

JSONが登場

JSON が登場する前は、データの転送には XML を使用していました。 XML はプレーンテキスト形式なので、インターネット経由でデータを交換するのに適しています。 XML 自体は複雑ではありませんが、DTD、XSD、XPath、XSLT などの複雑な仕様が多数あるため、一般的なソフトウェア開発者は XML に遭遇すると圧倒されてしまいます。結局、数か月間一生懸命勉強しても、XML 仕様を理解できないことに誰もが気付きます。

ついに、2002 年のある日、ダグラスクロックフォードは、長い間複数の巨大ソフトウェア企業に騙され、窮地に陥っていたソフトウェアエンジニアを救うために、超軽量のデータ交換形式である JSON を発明しました。

JSON は非常にシンプルなため、Web の世界で急速に普及し、ECMA 標準になりました。ほぼすべてのプログラミング言語には JSON を解析するためのライブラリがあり、JavaScript には JSON 解析が組み込まれているため、JavaScript では JSON を直接使用できます。

JSON構造

Json には、 Json オブジェクトと Json 配列という 2 つの基本構造があります。 Json オブジェクトと Json 配列の組み合わせにより、さまざまな複雑な構造を表現できます。

JSONオブジェクト

オブジェクト構造は{で始まります{ }で始まり、} で終わります。中間部分は英語の文字で区切られた 0 個以上のキー/値のペアで構成され、キーと値は英語の文字:オブジェクト構造の文法構造は次のとおりです。

ここに画像の説明を挿入

キーは文字列型であり、二重引用符で囲む必要があります。値は、文字列、数値、オブジェクト、配列などのデータ型にすることができます。例えば、人物オブジェクトには名前、パスワード、年齢などの情報が含まれており、JSON表現は次のようになります。

{
    "pname":"張三",
    "パスワード":"123456",
    「ページ」:40
}

JSON オブジェクトは中括弧内に格納されます。

JavaScript と同様に、オブジェクトは複数のキー/値のペアを保持できます。

Json オブジェクトと JavaScript オブジェクト

JavaScript では、文字列、数値、配列、日付などすべてがオブジェクトです。 JavaScript では、オブジェクトはプロパティとメソッドを持つデータです。

通常参照される Json オブジェクトは、Json 形式の JavaScript オブジェクト、または Json データ構造要件に準拠した JavaScript オブジェクトです。

対比	ジェスン	JavaScript
意味	単なるデータ形式	クラスのインスタンスを表す
伝染 ; 感染	プラットフォーム間で高速にデータを転送できる	転送できません
パフォーマンス	1. キーは二重引用符で囲む必要があります 2. 値はメソッド関数にはならず、undefined/NaNにもなりません。	1. 引用符なしのキー 2. 値には関数、オブジェクト、文字列、数値、ブール値などを使用できます。
相互変換	Json から JavaScript へ: 1. Json.parse(JsonStr); (IE7 とは互換性がありません) 2. eval("("+JsonStr+")"); (すべてのブラウザと互換性あり)	JavaScript オブジェクト変換 Json: Json を文字列化します。

ここに画像の説明を挿入

JSONをJavaScriptオブジェクトに変換する

ここに画像の説明を挿入

JSON配列

配列構造は[で始まり]で終わり、中間部分は英語の文字,配列構造の構文は次のとおりです。

ここに画像の説明を挿入

Json 配列の要素タイプは矛盾する場合があります。たとえば、item1 は文字列タイプ、item2 は数値タイプ、item3 はオブジェクトタイプである可能性があります。配列の最後の要素の後にコンマを続けることはできません。

複雑な配列型

ここに画像の説明を挿入

ここでは、3 つのオブジェクトを含む配列を作成します。

1 つ目は HTML オブジェクトで、これも 5 つの要素を含む配列です。 2 番目は、4 つの要素を含む配列である JavaScript オブジェクトです。 3 番目は Server オブジェクトで、これも 3 つの要素を含む配列です。

複雑なオブジェクト配列の組み合わせ

上記の 2 種類の (オブジェクト、配列) データ構造を組み合わせて、より複雑なデータ構造を形成することもできます。

オブジェクトには配列が含まれています

ここに画像の説明を挿入

ここでは、複雑な siteInfo オブジェクトを作成します。

siteInfo オブジェクトの siteUrl プロパティの値は www.haicoder.com、siteInfo オブジェクトの siteAddr プロパティの値は shanghai、siteInfo オブジェクトの sitePriority プロパティの値は 1、siteInfo オブジェクトの siteModule プロパティは配列です。

siteModule 配列には 2 つの要素があり、最初の要素は HTML で、2 番目の要素は JavaScript です。両方の要素も配列型です。

配列にはオブジェクトが含まれています

JavaScript と同様に、配列にはオブジェクトを含めることができます。

"従業員"：[  
    {"firstName":"ジョン", "lastName":"ドウ"},  
    {"firstName":"アンナ", "lastName":"スミス"},  
    {"firstName":"ピーター", "lastName":"ジョーンズ"}  
]

上記の例では、オブジェクト「employees」は配列です。 3 つのオブジェクトが含まれます。

各オブジェクトは従業員レコード (名と姓) です。

JSON構文ルール

データはキーと値のペアです。
データはカンマで区切られます。
中括弧はオブジェクトを格納し、角括弧は配列を格納する

均一な解析を確実に行うには、JSON 文字列を二重引用符""で囲み、オブジェクトキーも二重引用符""で囲む必要があります。

Json キーと値のペア

Json データの書き込み形式は、名前/値のペアです。 JavaScript オブジェクトのプロパティと同じです。名前/値のペアは、フィールド名 (二重引用符で囲まれている)、それに続くコロン、そして値で構成されます。

ここに画像の説明を挿入

Json値のデータ型

Json 値には次の種類があります。

タイプ	説明する
番号	Json 数値型は整数型または浮動小数点型をサポートできますが、8 進数および 16 進数形式は使用できません。 Json 数値型では NaN と Infinity も使用できません。
弦	Json 文字列は二重引用符で囲んで記述する必要があり、二重引用符のみで記述する必要があります。 Unicode 文字とバックスラッシュエスケープ文字をラップします。 Json には文字型はなく、文字型は単一の文字列です。
ブール	Json ブール値 true または false。小文字のみ使用できます。二重引用符で囲まれた値はブール値ではありません。
配列	順序付けられた値のシーケンス。
物体	{ キー:値のペアの順序付けられていないコレクション。 }
ヌル	ヌル。

JSON は JavaScript 構文を使用しますが、JSON 形式は単なるテキストです。
テキストは任意のプログラミング言語で読み取ることができ、データ形式として渡すことができます。

ダグラスは長年 Yahoo のシニアアーキテクトを務めており、当然ながら JavaScript が大好きです。彼が設計した Json は、実際には JavaScript 構文のサブセットであり、JavaScript オブジェクトの文字列表現です。 Json はテキストを使用して、本質的には文字列である JavaScript オブジェクトの情報を表します。

JsonはJavaScript構文を使用する

Json は JavaScript 構文を使用するため、JavaScript で Json を処理するために追加のソフトウェアは必要ありません。

ここに画像の説明を挿入

ここでは、JavaScript を通じてオブジェクト配列を作成し、オブジェクト配列に値を割り当てます。

コンテンツにアクセスする

ここに画像の説明を挿入

データを変更する

オブジェクトの 2 番目の要素のカテゴリを変更します。

モジュール[1].category = "ES6";

Json および JavaScript オブジェクトのトラバーサル

Json文字列のトラバーサルとJavaScript オブジェクトのトラバーサルはどちらも、トラバースに for-in ループを使用します。

Jsonトラバーサル

haicoder.html ファイルを作成し、次のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>Json トラバーサル</title>
    <script type="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var str = {"name":"haicoder", "url":"www.haicoder.net"};
        (var k in str) {
            console.log(k + " -> " + str[k]);
        }
    </スクリプト>
</head>
<本文>
</本文>
</html>

まず、Json 文字列 str を定義しました。次に、 for ループを使用して Json 文字列をトラバースします。k は Json 文字列内のキーであり、str[k] は Json 文字列キーに対応する値です。

ブラウザでファイルを開くと、ブラウザの出力は次のようになります。

ここに画像の説明を挿入

JavaScript オブジェクトトラバーサル

haicoder.html ファイルを作成し、次のコードを入力します。

!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>JavaScript オブジェクトトラバーサル</title>
    <script type="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var obj = {name:"haicoder", url:"www.haicoder.net"};
        (var k in obj) {
            console.log(k + " -> " + obj[k]);
        }
    </スクリプト>
</head>
<本文>
</本文>
</html>

まず、JavaScript オブジェクト obj を定義します。次に、 for ループを使用して JavaScript オブジェクトをトラバースします。k は JavaScript オブジェクトのキーであり、obj[k] は JavaScript オブジェクトキーに対応する値です。

ここに画像の説明を挿入

Json と JavaScript の配列トラバーサル

Json配列の走査とJavaScript配列の走査はどちらもfor-inループを使用して走査します。

Json配列の走査

haicoder.html ファイルを作成し、次のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>Json 配列のトラバーサル</title>
    <script type="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var jsonArr = [
            {"mod":"json", "url":"www.haicoder.net/json"},
            {"mod":"vue", "url":"www.haicoder.net/vue"},
            {"mod":"python", "url":"www.haicoder.net/python"}
        ]
        (var k in jsonArr) {
            console.log(k + " -> " + jsonArr[k].mod + " -> " + jsonArr[k].url);
        }
    </スクリプト>
</head>
<本文>
</本文>
</html>

まず、Json 配列を定義します。配列内の各要素はオブジェクトです。次に、 for ループを使用して Json 配列をトラバースします。k は Json 配列の添字であり、jsonArr[k] は Json 配列の添字キーに対応する値です。

Json 配列内の各オブジェクトの値を取得するには、 .を使用します。

ここに画像の説明を挿入

JavaScript オブジェクト配列のトラバーサル

var Js_Result = [
  {
    名前: "haicoder",
    URL: "www.haicoder.net",
    年齢: 20
  },
  {
    名前: "JavaScript",
    URL: "www.JavaScript.net",
    年齢: 30
  }
]
for (var i in Js_Result){ // iは配列の添え字です console.log(i+" "+Js_Result[i].firstName
 +" "+Js_Result[i].lastName
 +" "+Js_Result[i].age);
}
//結果出力は0です haicoder www.haicoder.net 20
1 JavaScript www.JavaScript.net 30

JavaScript オブジェクトを配列 Js_Result に保存します。for ループを使用して Json_Result を走査します。ここで、i は配列インデックスであり、Js_Result[i].firstName を通じて対応する値を取得します。

シリアル化

任意の JavaScript オブジェクトを JSON に変換するということは、オブジェクトを JSON 形式の文字列にシリアル化し、ネットワーク経由で他のコンピューターに送信できるようにすることを意味します。

まず、Xiaoming オブジェクトを JSON 文字列にシリアル化します。

ここに画像の説明を挿入

出力の見栄えを良くするために、パラメータを追加し、インデントに従って出力することができます。

JSON.stringify(xiaoming, null, ' ');

結果：

{
"名前": "シャオミン",
「年齢」: 14,
「性別」：真、
「高さ」: 1.65,
「グレード」: null、
"中学校": "\"W3C\" 中学校",
「スキル」: [
「JavaScript」、
「ジャワ」、
「パイソン」、
「リスプ」
]
}

オブジェクトの各キーと値のペアが最初に関数によって処理されるように関数を渡すこともできます。

関数 convert(キー, 値) {
    if (typeof value === 'string') {
        戻り値.toUpperCase();
    }
    戻り値;
}

JSON.stringify(xiaoming, 変換, ' ');

上記のコードはすべての属性値を大文字に変換します。

{
  "名前": "シャオミン",
  「年齢」: 14,
  「性別」：真、
  「高さ」: 1.65,
  「グレード」: null、
  "中学校": "\"W3C\" 中学校",
  「スキル」: [
    「JavaScript」、
    「ジャバ」、
    「パイソン」、
    「LISP」
  ]
}

Xiaoming のシリアル化方法も正確に制御したい場合は、 xiaomingのtoJSON()メソッドを定義して、JSON がシリアル化する必要があるデータを直接返すことができます。

var 暁明 = {
    名前: 'シャオミン'、
    年齢: 14歳
    性別: 正しい、
    高さ: 1.65、
    グレード: null、
    '中学校': '\"W3C\" 中学校',
    スキル: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: 関数() {
        return { // 名前と年齢のみを出力し、キーを変更します:
            '名前': this.name,
            「年齢」: this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"名前":"Xiaoming","年齢":14}'

デシリアライゼーション

通常、サーバーから JSON データを読み取り、そのデータを Web ページに表示します。

JSON 形式の文字列を取得した後、 JSON.parse()を直接使用してそれを JavaScript オブジェクトに変換します。

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"Xiao Ming","age":14}'); // オブジェクト {name: 'Xiao Ming', age: 14}
JSON.parse('true'); // 真
JSON.parse('123.45'); // 123.45

JSON.parse()解析された属性を変換する関数も受け入れることができます。

ここに画像の説明を挿入

Jsonの特徴

Json は機械による解析と生成が容易で、クライアント側の JavaScript は eval() を通じて Json データを簡単に読み取ることができます。
Json は本質的に自己記述的であり、人間が読み書きするのが簡単です。
Json は、言語に完全に依存しないテキスト形式を使用します。フォーマットはすべて圧縮されており、帯域幅をほとんど占有しません。
Json パーサーと Json ライブラリはさまざまなプログラミング言語をサポートしており、現在ではほぼすべてのプログラミング言語が Json をサポートしています。
Json 形式はサーバー側のコードで直接使用できるため、サーバー側とクライアント側のコード開発が大幅に簡素化されますが、完了したタスクは変更されず、保守も容易です。
Json は XML よりも小さく、高速で、解析も簡単です。
Json では文字セットが UTF-8 でなければならないことも規定されているため、複数の言語を表現する際に問題はありません。

JSON (JavaScript Object Notation) を 1 つの記事で理解する方法について説明したこの記事はこれで終わりです。JSON (JavaScript Object Notation) に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: