JavaScript JSON

📍 JSONとは？

JSON(JavaScript Object Notation)の略で、JavaScriptでオブジェクトを作成する際に使用される式です.
▼代表的にサーバとの通信でデータを交換するためのフォーマット.

データを格納または転送するときによく使用される軽量レベルのDATA交換フォーマット.

JSONは単なるデータフォーマットであり、通信方法やプログラミング構文ではなく、データを表す方法です.

📌 JSON作成の目的
いくつかの表現では、オブジェクトをオブジェクトにそのまま転送するか、アレイを他のシステムにそのまま転送することを目的とする異なる言語間のデータ基準があります.

AJAXでデータを交換する場合は、JSONをデータ形式として使用します.
ネットワークを介してオブジェクトを文字列に変換するプロセスを文字列化と呼びます.
文字列からネイティブオブジェクトに変換することをparsingと呼びます.

1.XMLとJSON

サーバとデータを交換する場合、JSONだけでなく、いろいろな方法があります.代表的にはXMLを使用していますが、その後最も多く使用されたのはJSONです.🤔

XML

XMLはHTMLなどの表記言語の一つです.

XMLを使用すると、不要なタグが多く追加され、ファイルのサイズが大きくなるだけでなく、読みやすさも悪くなります.

JSON

これは、

のデータを送信および受信する際に使用できる最も簡単なファイルフォーマットです.

テキストをベースにして、簡単で読みやすいです.

キー値ペアからなるデータフォーマットであるため、ほとんどのプログラミング言語と互換性があります.(多くのプログラミング言語は、通常、キー値ペアとしてデータを構造化するため)

2.JSONの特徴と応用

通常、サーバとクライアント間のコミュニケーションで使用されます.

JavaScriptオブジェクトタグ法に似ています.JSONドキュメントフォーマットは、JavaScriptオブジェクトのフォーマットに基づいて作成されます.

JavaScriptを使用すると、JSON形式のドキュメントをJavaScriptオブジェクトに簡単に変換できます.

他のプログラミング言語を使用すると、特定の言語に依存せず、プログラミング言語やプラットフォームに依存せずに簡単に作成できます.

ほとんどのプログラミング言語では、JSON形式のデータを処理するライブラリが提供されています.

Ajaxを使用してサーバと通信し、データの送受信を容易に行うことができます.

ブラウザだけでなく、移動中にサーバとデータを交換する場合や、サーバと通信しない場合にファイルシステムにオブジェクトを保存する場合にもよく使われます.

📌 check!
JSON式は分かりやすく、データ量が少ないため、最近ではXMLの代わりにJSONが設定や転送データを格納するのによく使われています.

3.JSONのデメリット

JSONはXMLに比べてセキュリティ面で弱点がある.

内容は含蓄があるので、内容の意味がわかりにくいです.

XMLと比較して、より小さなデータ転送に適していますが、大容量のデータ転送には適していません.

AJAXは、データだけでなく、JSそのものも伝えることができます.つまり、JSONデータかと思ったら、受信後に悪意のあるスクリプトが発生する可能性があります.△これがJSON関連ライブラリを単独で使用する理由です.

4.JSON形式

1.name-value形式の対

以上の言語でobjectなどとして実現される.

{ "Key": "value"}

{
  "firstName": "seul",
  "lastName": "kim",
  "email": "[email protected]"
}

2.値のシリアル表形式

言語以上でアレイなどが実現されている.

[value1, value2, ...]

{
  "firstName": "seul",
  "lastName": "kim",
  "email": "[email protected]",
  "hobby": ["painting","game"]
}

✍️
1)JSONでは、大かっこ{}が対象、大かっこ[]が配列を表す.
2)JSONのオブジェクトはname-valueペアの集合であり、nameはstringでなければならず、valueはデフォルトのデータ型または配列、オブジェクトでなければならない.
3)各ペアはカンマ,で区切られ、名前と値は:で接続されている.
+)上の"hobby": ["painting","game"]これも{}の中にあるのでname-valueの対です.
+) ex. [ 10, {"v": 20}, [30, "마흔"] ]配列を示す括弧[]内には、基本資料型10、対象{ "v" : 20 }、配列[30,"마흔]が見られる.

5.JavaScriptオブジェクトとJSON形式テキストの変換

JSON.stringgify(JSON文字列に変換する値)
:JavaScriptオブジェクトをJSONテキストに変換します.
JSON.parse(JSONに変換する文字列)
:JSON形式のテキストをJavaScriptオブジェクトに変換します.
JSONを学ぶポイントは?
(1)オブジェクトをシーケンス化してJSONに変換する方法
(2)逆シーケンス化(Serialize)JSONをオブジェクトに変換する方法
ちょくれつ
:データ構造またはオブジェクトのステータスを(同じまたは異なる)コンピュータ環境に格納し、後で再構築可能なフォーマットに変換するプロセス.
では、例を作成して、srtifyがどのように利用できるか、文字列で作成したJSONをObjectに変換する方法を見てみましょう.😀
5-1. Object to JSON
(1)Booleanタイプ(Primitive type)をJSONに変換▼

let json = JSON.stringify(true); 

console.log(json); // true

(2)配列をJSONに変換▼

let json1 = JSON.stringify(['apple', 'banana']); 

console.log(json1); // ["apple", "banana"]

はある程度配列タイプとしてマークされていることが確認できます.

(3)オブジェクトをJSONに変換▼

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    symbol: Symbol('id'),
    jump: () => {
        console.log(`${this.name} can jump!`);
    }
};

json = JSON.stringify(rabbit);

console.log(json);
// {"name":"tori","color":"white","size":null,"birthDate":"2021-12-15T11:38:46.722Z"} 

Dateという名前のオブジェクトが文字列に変換され、JSONとして作成されます.

ジャンプという名前の関数は、JSONに含まれていないことを決定することができる.(関数はオブジェクトのデータではないため)
JavaScriptのみのデータ(構成部品)もJSONには含まれません.

(4)ある程度JSONに変換する制御が可能である.▼

//ex.1)
json = JSON.stringify(rabbit, ['name', 'color']); 

console.log(json);  
// {"name":"tori","color":"white"}



//ex.2)
json = JSON.stringify(rabbit, (key, value) => {  
    return key === 'name' ? 'seul' : value; 
});

console.log(json); 
// {"name":"seul","color":"white","size":null,"birthDate":"2021-12-15T12:11:15.706Z"}

2ex.1ウォンのpropertyのみを選択して定義すれば、このpropertyを変換するしかない.

2ex.2コールバック関数も使用できます.

5-2. JSON to Object
parse(json)

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    symbol: Symbol('id'),
    jump: () => {
        console.log(`${this.name} can jump!`);
    }
};


json = JSON.stringify(rabbit);


const obj = JSON.parse(json);  // 다시 오브젝트로 변환
console.log(obj);

rabbit.jump();  // can jump!

obj.jump(); // Error

なぜエラーが発生したのですか?
これは,JSONに変換する際に関数を含まず,データのみを渡してからJSONをオブジェクトに変換する際にエラーが発生したためである.(ジャンプ方法は含まれません.)
どうしてjumpの名前がリストされていませんか.
:ウサギオブジェクトでは、nameにアクセスするには、矢印関数ではなく通常の関数として宣言する必要があります.(オブジェクトのメソッドを矢印関数として宣言する場合は、グローバルオブジェクトを指すため、ウィンドウ出力と呼ばれます.🧐)
reference
coding-everybody
usefultoknow_JSON
khoa_JSON
ZeddiOS
wiki-serialization
dream_coding
JSON